Code block markup does not follow recommendations by WHATWG, causes issues with 3rd party plugins - Githubissues

nuxt / content

The file-based CMS for your Nuxt application, powered by Markdown and Vue components.

https://content.nuxt.com

MIT License

3k stars 605 forks source link

Code block markup does not follow recommendations by WHATWG, causes issues with 3rd party plugins #2628

Open testudor opened 1 month ago

testudor commented 1 month ago

Environment

Operating System: Linux
Node Version: v18.18.0
Nuxt Version: 3.11.2
CLI Version: 3.11.1
Nitro Version: 2.9.6
Package Manager: npm@10.2.3
Builder: -
User Config: devtools, modules, content
Runtime Modules: @nuxt/content@2.12.1
Build Modules: -

Reproduction

https://stackblitz.com/edit/github-9baaph?file=nuxt.config.ts,content%2Findex.md

Describe the bug

The WHATWG (Web Hypertext Application Technology Working Group) recommends code block markup to be structured as follows:

<pre>
  <code class="language-pascal">
    var i: Integer;
    begin
       i := 1;
    end.
  </code>
</pre>

(taken from https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-code-element)

Nuxt Content uses a different format, where the language-xxx class is placed on the pre element instead. This breaks compatibility with some 3rd party plugins such as https://github.com/remcohaszing/rehype-mermaid. Is there any good reason Nuxt Content does not follow the spec? Please also see the discussion here: https://github.com/remcohaszing/rehype-mermaid/issues/15.

Additional context

No response

Logs

No response