What version of Expressive Code are you using?
0.41.6
What tools are you using Expressive Code with?
Astro
What package manager are you using?
npm
What operating system are you using?
macOS
What browser are you using?
N/A (this issue is not related to specific browsers)
Describe the Bug
rehype-expressive-code generates HTML that does not conform to the HTML content model.
Specifically, the following invalid structures are produced at least:
- A
div element inside a code element
- A
div element inside a button element
Both are not allowed according to the HTML specification.
Reproduction
This issue might be reproducible with a lower-level package, but this is minimal so far.
import rehypeExpressiveCode from "rehype-expressive-code";
import rehypeParse from "rehype-parse";
import rehypeStringify from "rehype-stringify";
import { unified } from "unified";
const result = await unified()
.use(rehypeParse, { fragment: true })
.use(rehypeExpressiveCode)
.use(rehypeStringify)
.process("<pre><code>foo</code></pre>");
console.log(result.toString());Steps to reproduce
I have prepared a reproduction repository at https://github.com/yudai-nkt/expressive-code-reproduction-423
$ git clone https://github.com/yudai-nkt/expressive-code-reproduction-423
$ cd expressive-code-reproduction-423
$ npm ci
$ npm test
> test
> node repro.mjs | oxfmt --stdin-filepath=/tmp/repro.html | markuplint --locale=en-US
<markuplint> error: The "style" element is not allowed in the "div" element in this context (permitted-contents) /Users/ynkt/repo/github.com/yudai-nkt/expressive-code-reproduction-423/<AnonymousFile>:2:3
1: <div•class="expressive-code">
2: ••<style>
3: ••••.expressive-code•{
<markuplint> error: The "div" element is not allowed in the "code" element in this context (permitted-contents) /Users/ynkt/repo/github.com/yudai-nkt/expressive-code-reproduction-423/<AnonymousFile>:812:12
811: ••••••data-language="plaintext"
812: ••••><code><div class="ec-line"><div•class="code"><span•style="--0:#e1e4e8;--1:#24292e">foo</span></div></div></code></pre>
813: ••••<div•class="copy">
<markuplint> error: The "div" element is not allowed in the "button" element in this context (permitted-contents) /Users/ynkt/repo/github.com/yudai-nkt/expressive-code-reproduction-423/<AnonymousFile>:815:79
814: ••••••<div•aria-live="polite"></div>
815: ••••••<button•title="Copy•to•clipboard"•data-copied="Copied!"•data-code="foo"><div></div></button>
816: ••••</div>The first error (a style element inside a div element) is not a major concern in my case because the Astro integration converts those elements into link elements.
However, the latter two errors remain problematic, as they result in an incorrect markup.
Participation
What version of Expressive Code are you using?
0.41.6
What tools are you using Expressive Code with?
Astro
What package manager are you using?
npm
What operating system are you using?
macOS
What browser are you using?
N/A (this issue is not related to specific browsers)
Describe the Bug
rehype-expressive-codegenerates HTML that does not conform to the HTML content model.Specifically, the following invalid structures are produced at least:
divelement inside acodeelementdivelement inside abuttonelementBoth are not allowed according to the HTML specification.
Reproduction
This issue might be reproducible with a lower-level package, but this is minimal so far.
Steps to reproduce
I have prepared a reproduction repository at https://github.com/yudai-nkt/expressive-code-reproduction-423
The first error (a
styleelement inside adivelement) is not a major concern in my case because the Astro integration converts those elements intolinkelements.However, the latter two errors remain problematic, as they result in an incorrect markup.
Participation