remcohaszing / rehype-mermaid

A rehype plugin to render mermaid diagrams
MIT License
80 stars 8 forks source link

Issue with plugin when the code is first parsed by a remark plugin #10

Closed LunaticMuch closed 9 months ago

LunaticMuch commented 9 months ago

I am trying to workaround some problems with Astro. In an environment with Astro and Astro Expressive Code any code in markdown is processed by Shiki. This makes, by default, the processor to work on mermaid code which means the rehype plugin cannot see and interpret the code.

Now, the solution with remark works, but as stated it's limited and it would be better to use the rehype. A nice person suggested to workaround the trouble with a simple remark hack which I tried and could work. But then, the rehype plugin still refuses to detect and interpret the code.

I prepared this demo

As it can be seen, the code is returned as following

<pre><code class="language-mermaid">
graph TD;
          A-->B;
          A-->C;
          B-->D;
          C-->D;
</code></pre>

This is expected by the rehype plugin, which for some reason does catch it. I have spent hours investigating why it does not work without any clue. The workaround logic, despite it's arguable, seems sound and the output is the one expected.

remcohaszing commented 9 months ago

This is a bug in Astro. See https://github.com/remcohaszing/remark-mermaidjs/issues/23#issuecomment-1704861113 for details. Please report it with them.

The offending code is probably https://github.com/withastro/astro/blob/main/packages/markdown/remark/src/remark-prism.ts and https://github.com/withastro/astro/blob/main/packages/markdown/remark/src/remark-shiki.ts. Those should both be rehype plugins that generate a proper AST.

LunaticMuch commented 9 months ago

@remcohaszing I do confirm the workaround with rehype-raw works 🥳

remcohaszing commented 9 months ago

Thanks for confirming! That helps me confidently suggesting it to more people who run into this.