Compatibility issues with Nuxt Content

[testudor]

Hi,

Nuxt Content outputs code blocks in a slightly different way, which isn't recognized by your plugin.

<pre class="language-mermaid">
  <code>
    flowchart TB
        A --&gt; C
        A --&gt; D
        B --&gt; C
        B --&gt; D
  </code>
</pre>

The isMermaidElement function only checks for either pre tags with the mermaid class OR code tags with the language-mermaid class. The 'mixed' version used by Nuxt Content doesn't work. https://github.com/remcohaszing/rehype-mermaid/blob/c87fb48334db7121f356b8bee4599f234bfbf830/src/rehype-mermaid.ts#L67

[remcohaszing]

This HTML is weird. The language-mermaid class is supposed to appear on the <code> element. Otherwise it breaks compatibility with this plugin, but also various syntax highlighting integrations. This looks like a bug somewhere else. I’m personally not really familiar with Nuxt. Are you sure this comes from Nuxt, not some third party plugin?

Please provide a minimal reproduction.

[wooorm]

The HTML spec recommends this language-xxx class on the code element. Every syntax highlighter follows that. And so does markdown (CM and GFM). Sounds to me like a bug Nuxt Content should indeed solve.

[testudor]

I created a minimal reproduction which you can find here: https://stackblitz.com/edit/github-9baaph?file=nuxt.config.ts,content%2Findex. It's essentially just the official minimal starter template, with syntax highlighting activated for demonstration purposes.

Nuxt Content uses https://github.com/shikijs/shiki for highlighting under the hood, and it works just fine. Note that I didn't add the rehype-mermaid plugin since it wouldn't work anyway.

[testudor]

And you are right, the language-xxx tag on the code element is the recommended way. Still, it's strange that shiki seems to be okay with it (Assuming the Nuxt team didn't do some additional work to make it compatible). Depending on your feedback, I might just open up an issue in the Nuxt Content repo 🤷‍♂️

[remcohaszing]

It looks like Nuxt Content has the concept of a highlighter, which receives the code and language. It doesn’t seem to actually use the hast for this. I think the reason shiki works for Nuxt at all, is because it’s hooked into it using custom logic in such a highlighter.

Since Nuxt Content produces weird HTML, I suggest you report an issue upstream indeed. I am open to further discussion if the Nuxt Content team has good arguments to produce this HTML.

In the meantime you could implement a custom highlighter and use mermaid-isomorphic to process mermaid code blocks.