You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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><divclass="line"><spanclass="ct-952581">// Create a query looking for anything in content/ directory</span></div><divclass="line"><spanclass="ct-d7952f">const</span><spanclass="ct-cf3e01"></span><spanclass="ct-d584cd">contentQuery</span><spanclass="ct-cf3e01"></span><spanclass="ct-d7952f">=</span><spanclass="ct-cf3e01"></span><spanclass="ct-b07143">queryContent</span><spanclass="ct-cf3e01">()</span></div><divclass="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.
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.
Environment
Darwin
v18.10.0
3.4.0
2.3.3
yarn@1.22.19
vite
extends
,modules
,runtimeConfig
,app
,image
,content
,nitro
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
-
Reproduction
highlight
in the content configDescribe 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)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
span
todiv
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<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
The text was updated successfully, but these errors were encountered: