Using Shiki-Twoslash

[mattcroat]

Hey! 👋

I'm trying to use remark-shiki-twoslash for syntax highlighting but I'm hazy on how to convert everything to HTML. The plugin turns the code blocks into HTML so when it does the Markdown to HTML conversion it's not in the output.

Let me know if my understanding is right:

import { unified } from 'unified'
import shikiTwoslash from 'remark-shiki-twoslash'
import parseMarkdown from 'remark-parse'
import serializeMarkdown from 'remark-stringify'
import markdownToHtml from 'remark-rehype'
import serializeHtml from 'rehype-stringify'

const output = await unified()
  // Markdown processing part
  .use(parseMarkdown)
  .use(serializeMarkdown)
  .use([
    [shikiTwoslash, { theme: 'dark-plus' }]
    // ...
  ])
  //  HTML processing part
  .use(markdownToHtml)
  .use(serializeHtml)
  // Content
  .process('# Heading \n ```js \n console.log("Hello, World!") \n ```')

The output:

<h1>Heading</h1>

I'm expecting:

<h1>Heading</h1>

<pre class="shiki dark-plus" style="background-color: #1E1E1E; color: #D4D4D4"><div class="language-id">js</div><div class='code-container'><code><div class='line'><span style="color: #9CDCFE">console</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">log</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">"Hello, World!"</span><span style="color: #D4D4D4">) </span></div></code></div></pre>

[ChristianMurphy]

From https://github.com/shikijs/twoslash/blob/4c6416670553b61074cd33be0f3bb0fed64d0ada/packages/twoslash-cli/index.js#L143 I gather they are probably working on raw HTML text embedded in the markdown.
If that assumption is correct:

1. add the allow dangerous HTML option to remark rehype https://github.com/remarkjs/remark-rehype#optionsallowdangeroushtml
2. Convert the raw text into something that can be stringified either by:
   • setting the allowDangerousHtml option on rehype-stringify https://github.com/rehypejs/rehype/tree/main/packages/rehype-stringify
   • or apply https://github.com/rehypejs/rehype-raw after use(markdownToHtml), which should parse that raw text mixed in, into an HTML AST (HAST) which can be handled by rehype-stringify (and other rehype plugins)

[mattcroat]

Thank you! 👍️

Using allowDangerousHtml keeps the raw HTML so it can be processed if I understand right. I'm wondering shouldn't they be using rehype instead because now I get why rehype-prism is a rehype plugin.

If I understand right using the first method just returns a string but if you want to continue processing then it requires it to be a tree of nodes so the second method is preferred if you need that.

Here is the code for anyone having the same problem.

Using allowDangerousHtml:

const output = await unified()
  .use(parseMarkdown)
  .use(serializeMarkdown)
  .use([
    [shikiTwoslash, { theme: 'dark-plus' }]
    // ...
  ])
- .use(markdownToHtml)
- .use(serializeHtml)
+ .use(markdownToHtml, { allowDangerousHtml: true })
+ .use(serializeHtml, { allowDangerousHtml: true })
  .process('# Heading \n ```js \n console.log("Hello, World!") \n ```')

Using rehype-raw:

+ import markdownToHtmlAgain from 'rehype-raw'

const output = await unified()
  .use(parseMarkdown)
  .use(serializeMarkdown)
  .use([
    [shikiTwoslash, { theme: 'dark-plus' }]
    // ...
  ])
- .use(markdownToHtml)
- .use(serializeHtml)
+ .use(markdownToHtml, { allowDangerousHtml: true })
+ .use(markdownToHtmlAgain)
+ .use(serializeHtml)
  .process('# Heading \n ```js \n console.log("Hello, World!") \n ```')

[ChristianMurphy]

I'm wondering shouldn't they be using rehype instead because now I get why rehype-prism is a rehype plugin.

It likely would make more sense as a rehype plugin, given it mostly works on HTML.

If I understand right using the first method just returns a string but if you want to continue processing then it requires it to be a tree of nodes so the second method is preferred if you need that.

Exactly