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 Shikiji a powerful syntax highlighter using the same grammars and themes as VS Code.

It provides shikiji-twoslash that integrates the type information into your code snippets.

import { codeToHtml
 } from 'shikiji'
import { transformerTwoSlash
 } from 'shikiji-twoslash' 

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

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

Syntax Highlighting with Twoslash ​

Syntax Highlighting with Twoslash