Twoslash

Usage

Thanks to the Twoslash integration of Shiki, the default code syntax highlighter, it is as simple as adding a transformer.

npm install fumadocs-twoslash twoslash

Update your serverExternalPackages in Next.js config:

import { createMDX } from 'fumadocs-mdx/next';
 
const config = {
  reactStrictMode: true,
  serverExternalPackages: ['typescript', 'twoslash'],
};
 
const withMDX = createMDX();
 
export default withMDX(config);

Add to your Shiki transformers.

source.config.ts (Fumadocs MDX)

import { defineConfig } from 'fumadocs-mdx/config';
import { transformerTwoslash } from 'fumadocs-twoslash';
import { rehypeCodeDefaultOptions } from 'fumadocs-core/mdx-plugins';
 
export default defineConfig({
  mdxOptions: {
    rehypeCodeOptions: {
      themes: {
        light: 'github-light',
        dark: 'github-dark',
      },
      transformers: [
        ...(rehypeCodeDefaultOptions.transformers ?? []),
        transformerTwoslash(),
      ],
    },
  },
});

Add required styles, Tailwind CSS is recommended.

Tailwind CSS

@import 'fumadocs-twoslash/twoslash.css';

Add MDX components.

mdx-components.tsx

import { Popup, PopupContent, PopupTrigger } from 'fumadocs-twoslash/ui';
import defaultComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';
 
export function getMDXComponents(components?: MDXComponents): MDXComponents {
  return {
    ...defaultComponents,
    Popup,
    PopupContent,
    PopupTrigger,
    ...components,
  };
}

Now you can add twoslash meta string to codeblocks.

```ts twoslash
console.log('Hello World');
```

Example

Learn more about Twoslash notations.

Test

console.ggroup
groupCollapsed
groupEnd;
 
 
 
 
 
const 
const player: Playerplayer: Player = { name: 'Hello World' };

const a = '123';
 
console.log(a);

import { generateFiles } from 'fumadocs-openapi';
 
void generateFiles({
  input: ['./museum.yaml'],
  output: './content/docs/ui',
});

const a = '123';
 
a = 132;Cannot assign to 'a' because it is a constant.

Cache

You can enable filesystem cache with typesCache option:

source.config.ts

import { transformerTwoslash } from 'fumadocs-twoslash';
import { createFileSystemTypesCache } from 'fumadocs-twoslash/cache-fs';
 
transformerTwoslash({
  typesCache: createFileSystemTypesCache(),
});

Usage

Example

Cache

On this page