Syntax Highlighting with Twoslash

The core of Twoslash is relatively low-level and focusing on getting the type information for the given code snippet. It does not handles syntax highlighting nor how those information should be rendered.

To get the beautiful result you see on this website, you can use Shiki - a powerful syntax highlighter using the same grammars and themes as VS Code.

It provides @shikijs/twoslash that integrates the type information into your code snippets.

import { codeToHtml
 } from 'shiki'
import { transformerTwoslash
 } from '@shikijs/twoslash'

const html
 = await codeToHtml
(`console.log()`, {
  lang
: 'ts',
  theme
: 'vitesse-dark',
  transformers
: [
    transformerTwoslash
(), 
  ],
})

If you are using VitePress, you can directly use @shikijs/vitepress-twoslash to get the same result as this website.

Syntax Highlighting with Twoslash ​

Syntax Highlighting with Twoslash