<div> element is not permitted as content under <code>

[selfire1]

Environment

• Operating System: Darwin
• Node Version: v18.10.0
• Nuxt Version: 3.4.0
• Nitro Version: 2.3.3
• Package Manager: yarn@1.22.19
• Builder: vite
• User Config: extends, modules, runtimeConfig, app, image, content, nitro
• Runtime Modules: nuxt-icon@0.3.3, @nuxt/content@2.5.2, @nuxt/image-edge@1.0.0-28020728.5df24eb, @nuxtjs/tailwindcss@6.6.5, @nuxtjs/html-validator@1.2.4, @nuxtjs/color-mode@3.2.0
• Build Modules: -

Reproduction

1. Enable highlight in the content config

export default defineNuxtConfig({
  modules: ['@nuxt/content'],
  content: {
    highlight: {
      // https://github.com/shikijs/shiki/blob/main/docs/themes.md
      theme:  'min-light',
    },
  },
});

2. Render a fenced code block.

---

• Minimal reproduction on StackBlitz: StackBlitz

Describe the bug

This is an example of how Content outputs a fenced code block with highlight enabled (Example taken from the NuxtContent Website: queryContent() · Nuxt Content)

<pre>
  <code>
    <div class="line"><span class="ct-952581">// Create a query looking for anything in content/ directory</span></div>
    <div class="line"><span class="ct-d7952f">const</span><span class="ct-cf3e01"> </span><span
        class="ct-d584cd">contentQuery</span><span class="ct-cf3e01"> </span><span class="ct-d7952f">=</span><span
        class="ct-cf3e01"> </span><span class="ct-b07143">queryContent</span><span class="ct-cf3e01">()</span></div>
    <div class="line"></div>
    <!-- … -->
  </code>
</pre>

Using nuxtjs/html-validator, this throws an error for me: error <div> element is not permitted as content under <code> element-permitted-content.

I checked the MDN docs and in fact, <code> only accepts phrasing content as child content. In return, permitted parents for <div> are any elements that accept flow content.

If I understand correctly, nesting <div> under <code> is invalid HTML. Hence, this Content's DOM output results in Hydration Mismatches. Edit: While actually there are no Hydration Mismatches thrown, this rendering still isn't valid HTML and it might be worth looking into other solutions.

Additional context

• Shiki's website uses span elements itself to highlight tokens in code blocks.
• Related PR that changes span to div fix(code block): use <div> for Firefox code block line breaks #1885 to fix this issue Copying code blocks from markdown removes new lines on Firefox #1883
• Docusaurus resolved the Firefox issue by using <br> tags for line breaks, maybe that's something worth investigating? (fix: preserve line breaks when copy code in Firefox facebook/docusaurus#5668)

Logs

No response

[nobkd]

Can be closed, as it is changed in edge channel.

[farnabaz]

Resolved in #2008, and will be released in v2.6
As @nobkd said, for now you can use edge-channel for the fix