@shikijs/twoslash

A Shiki transformer for Twoslash, providing inline type hover inside code blocks.

Install

# npm
npm install -D @shikijs/twoslash

# yarn
yarn add -D @shikijs/twoslash

# pnpm
pnpm add -D @shikijs/twoslash

# bun
bun add -D @shikijs/twoslash

# deno
deno add npm:@shikijs/twoslash

This package is a transformer addon to Shiki.
For every integration that supports passing Shiki transformers, you can use this package.

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

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

The default output is unstyled. Add some CSS (e.g. style-rich.css) to make it look good.

If you want to run Twoslash on browsers or workers, see the CDN Usage section.

Renderers

Thanks to the flexibility of hast, this transformer allows customizing how each piece of information is rendered in the output HTML with ASTs.

We provide two renderers built‑in, and you can also create your own.

`rendererRich`

Source code: https://github.com/shikijs/shiki/blob/main/packages/twoslash/src/renderer-rich.ts

Tip – This is the default renderer since v0.10.0.

It provides a more explicit class name prefixed with twoslash- for better scoping. In addition, it runs syntax highlighting on the hover information.

import { rendererRich, transformerTwoslash } from '@shikijs/twoslash';

transformerTwoslash({
  renderer: rendererRich(),
});

Here are a few examples with the built‑in style-rich.css:

interface Todo {
  title: string
}

const todo: Readonly<Todo> = {
  title: 'Delete inactive users'.toUpperCase(),
  // ...
}

todo.title = 'Hello' // <-- error: Cannot assign to 'title' because it is a read‑only property.

Number.parseInt('123', 10) // <-- runtime

`rendererClassic`

Source code: https://github.com/shikijs/shiki/blob/main/packages/twoslash/src/renderer-classic.ts

This renderer aligns with the output of legacy shiki-twoslash.

import { rendererClassic, transformerTwoslash } from '@shikijs/twoslash';

transformerTwoslash({
  renderer: rendererClassic(),
});