Using Shiki-Twoslash #186
-
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> |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
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.
|
Beta Was this translation helpful? Give feedback.
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:
allowDangerousHtml
option onrehype-stringify
https://github.com/rehypejs/rehype/tree/main/packages/rehype-stringifyuse(markdownToHtml)
, which should parse that raw text mixed in, into an HTML AST (HAST) …