Twoslash

@foldocs/twoslash creates a CodeHighlighter that enriches TypeScript examples with compiler diagnostics and hover information.

Configure the highlighter

import { createTwoslashHighlighter } from '@foldocs/twoslash'

const highlightCode = createTwoslashHighlighter({
  compilerOptions: { strict: true },
})

Pass the highlighter to the MDX compiler or Vite integration. Ordinary languages continue through Shiki.

const const locales: readonly ["en", "es"]locales = ['en', 'es'] as type const = readonly ["en", "es"]const
type type Locale = "en" | "es"Locale = (typeof const locales: readonly ["en", "es"]locales)[number]

const const activeLocale: "en" | "es"activeLocale: type Locale = "en" | "es"Locale = 'en'
const activeLocale: "en"activeLocale

Keep examples reproducible

Pin TypeScript and dependency versions, include only the declaration files the example needs, and treat unexpected diagnostics as build failures. Compiler-aware examples should change in the same review as the API they document.