Twoslash

Use Typescript Twoslash in your docs

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 stylings and components.

layout.tsx
import 'fumadocs-ui/twoslash.css';
import { Popup, PopupContent, PopupTrigger } from 'fumadocs-ui/twoslash/popup';

const mdxComponents = {
  Popup,
  PopupContent,
  PopupTrigger,
};

Example

Learn more about Twoslash notations.

console.g
  • group
  • groupCollapsed
  • groupEnd
;
const
const player: Player
player
: 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';
Custom log message
a = 132;
Cannot assign to 'a' because it is a constant.
const b = 1;
Custom error message
const c = 1;
Custom warning message
const d = 1;
Custom annotation message

Last updated on