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

Add to your Shiki transformers.

Example for Fumadocs MDX

next.config.mjs

import createMDX from 'fumadocs-mdx/config';
import { rehypeCodeDefaultOptions } from 'fumadocs-core/mdx-plugins';
import { transformerTwoslash } from 'fumadocs-twoslash';
 
/** @type {import('next').NextConfig} */
const withMDX = createMDX({
  mdxOptions: {
    rehypeCodeOptions: {
      transformers: [
        ...rehypeCodeDefaultOptions.transformers,
        transformerTwoslash(),
      ],
    },
  },
});
 
export default withMDX(config);

Add required styles and components.

Tailwind CSS Required

layout.tsx

import 'fumadocs-twoslash/twoslash.css';

page.tsx

import { Popup, PopupContent, PopupTrigger } from 'fumadocs-twoslash/ui';
import defaultMdxComponents from 'fumadocs-ui/mdx';
 
<MDX
  components={{
    ...defaultMdxComponents,
    Popup,
    PopupContent,
    PopupTrigger,
  }}
/>;

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.

Usage

Example

On this page