<div> is rendered while its ancestor is a <pre>

[xihale]

reproduce

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.

<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.