shikijs / twoslash

You take some Shiki, add a hint of TypeScript compiler, and 🎉 incredible static code samples
https://shikijs.github.io/twoslash/
MIT License
1.08k stars 53 forks source link

[Eleventy] line highlighting requires character after the line-specifying } #194

Open olets opened 10 months ago

olets commented 10 months ago

Shiki Twoslash supports highlighting lines. For me in Eleventy (v2.0.1, eleventy-plugin-shiki-twoslash v1.1.3) this only works if I add a space after the }.

I haven't tried other plugins, it may not be specific to the Eleventy package.

Expected

```text {0}
highlighted
not highlighted

results in something like

```html
<pre class="shiki">
  <div class="language-id">text</div>

  <div class="code-container">
    <code>
      <div class="line highlight">
        highlighted
      </div>

      <div class="line">
        not highlighted
      </div>
    </code>
  </div>
</pre>

Actual

```text {0}
highlighted
not highlighted

results in something like

```diff
<pre class="shiki">
  <div class="language-id">text</div>

  <div class="code-container">
    <code>
-      <div class="line highlight">
+      <div class="line">
        highlighted
      </div>

      <div class="line">
        not highlighted
      </div>
    </code>
  </div>
</pre>

Workaround

Adding whitespace after the }, like so (looks the same; select to see the text·{0}·

```text {0} 
highlighted
not highlighted


results in the highlighted line getting `.highlight`.