Twoslash

使用

🌐 Usage

得益于默认代码语法高亮工具 Shiki 的 Twoslash 集成，它就像添加一个转换器一样简单。

🌐 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

对于 Next.js，你需要将以下依赖外部化：

🌐 For Next.js, you need to externalize the following deps:

next.config.mjs (Next.js)

const config = {
  reactStrictMode: true,
  serverExternalPackages: ['typescript', 'twoslash'],
};

添加到你的 Shiki 转换器。

🌐 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()],

      // important: Shiki doesn't support lazy loading languages for codeblocks in Twoslash popups
      // make sure to define them first (e.g. the common ones)
      langs: ['js', 'jsx', 'ts', 'tsx'],
    },
  },
});

添加样式，需要 Tailwind CSS v4。

🌐 Add styles, Tailwind CSS v4 is required.

Tailwind CSS

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

添加 MDX 组件。

🌐 Add MDX components.

mdx-components.tsx

import * as Twoslash from 'fumadocs-twoslash/ui';
import defaultComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';

export function getMDXComponents(components?: MDXComponents): MDXComponents {
  return {
    ...defaultComponents,
    ...Twoslash,
    ...components,
  };
}

现在你可以将 twoslash 元字符串添加到代码块中。

🌐 Now you can add twoslash meta string to codeblocks.

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

缓存

🌐 Cache

可选地，你可以使用 typesCache 选项启用文件系统缓存：

🌐 Optionally, you can enable filesystem cache with typesCache option:

source.config.ts

import {  } from 'fumadocs-twoslash';
import {  } from 'fumadocs-twoslash/cache-fs';

({
  : (),
});

例子

🌐 Example

了解更多关于 Twoslash 符号的信息。

🌐 Learn more about Twoslash notations.

Test

.ggroup
groupCollapsed
groupEnd;

const player:  = { : 'Hello World' };       
const player: Player

const  = '123';

.();

const  = '123';

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

使用

缓存

例子

On this page