Twoslash fragments are being rendered in eleventy-plugin-shiki-twoslash and markdown-it

[Maximvdw]

Using eleventy-plugin-shiki-twoslash v1.0.43 & @11ty/eleventy v1.0.0-beta.2

Expected behavior

    ```twoslash include test
    const test: string = "";
    ```

should not show up in the output. I confirmed that the result variable at: https://github.com/shikijs/twoslash/blob/main/packages/remark-shiki-twoslash/src/index.ts#L44 is an empty string "". With an empty string the <pre> element still shows in the output with the unformatted text inside a <code class="language-twoslash"> block. When I manually change this to a string with 1 space the <pre><code...> block still renders but the text is no longer visible.

I also confirmed that the output of transformAttributesToHTML in eleventy-plugin-shiki-twoslash (https://github.com/shikijs/twoslash/blob/main/packages/eleventy-plugin-shiki-twoslash/index.js#L28) is an empty string.

It seems that markdown-it will use the default output when the highlighter function returns an empty string, returning a non-empty string is also not an option as the internal <pre> wrapper is still added. https://github.com/markdown-it/markdown-it/blob/master/lib/index.js#L161-L163

Currently my solution was to return a hidden <pre> block so that the internal wrapper is skipped - is there a nicer solution or configuration for markdown-it?

Snippet solution

  eleventyConfig.addMarkdownHighlighter((code, lang, fence) => {
    code = code.replace(/\r?\n$/, "") // strip trailing newline fed during code block parsing
    const result = transformAttributesToHTML(code, [lang, fence].join(" "), highlighters, options);
    return result === "" ? "<pre style='display: none'></pre>" : result;
  })

Example implementation in .eleventy.js: https://github.com/OpenHPS/openhps.org/blob/master/.eleventy.js#L47-L57

[orta]

I don't know if there is a better answer, but I think we should probably have the <pre style='display:none'> coming from the underlaying shiki-twoslash dependency. It'll work everywhere and it's not a huge amount of extra markup