Closed testudor closed 4 months ago
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.
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.
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.
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 🤷♂️
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.
Hi,
Nuxt Content outputs code blocks in a slightly different way, which isn't recognized by your plugin.
The
isMermaidElement
function only checks for eitherpre
tags with themermaid
class ORcode
tags with thelanguage-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