<div> is rendered while its ancestor is a <pre>
## reproduce
```ts
import { codeToHtml } from 'shiki'
import { transformerTwoslash } from '@shikijs/twoslash'
const code = `
let a = "";
// ^?
`
const html = await codeToHtml(code, {
lang: 'ts',
theme: 'github-dark-default',
transformers: [
transformerTwoslash(),
],
})
console.log(html) // highlighted html string
```
then you will find that there is div blocks, whose class is `twoslash-popup-arrow` as follows.
```html
<pre class="shiki github-dark-default twoslash lsp" ......
<div class="twoslash-popup-arrow"></div>
...... </pre>
```
Here is the full output.
```
<pre class="shiki github-dark-default twoslash lsp" style="background-color:#0d1117;color:#e6edf3" tabindex="0"><code><span class="line"></span>
<span class="line"><span style="color:#FF7B72">let</span><span style="color:#E6EDF3"> </span><span style="color:#E6EDF3"><span class="twoslash-hover twoslash-query-presisted"><span class="twoslash-popup-container"><div class="twoslash-popup-arrow"></div><code class="twoslash-popup-code"><span style="color:#FF7B72">let</span><span style="color:#E6EDF3"> a</span><span style="color:#FF7B72">:</span><span style="color:#79C0FF"> string</span></code></span>a</span></span><span style="color:#E6EDF3"> </span><span style="color:#FF7B72">=</span><span style="color:#A5D6FF"> ""</span><span style="color:#E6EDF3">;</span></span>
<span class="line"></span></code></pre>
```
## problem
This goes against the HTML spec: https://html.spec.whatwg.org/multipage/dom.html#phrasing-content-2, therefore, I failed to pass the build check for my project on the Qwik platform.
## other info
I noticed that https://shiki.style/packages/twoslash utilizes an outer \<div\> element off the \<pre\> tag.
I searched everywhere I could think of, but I couldn't find any relevant information.
0 条评论