Twoslash

用法

感谢 Shiki 的 Twoslash 集成，默认代码语法高亮器，只需添加一个转换器即可。

npm install fumadocs-twoslash twoslash

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

next.config.mjs (Next.js)

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

添加到你的 Shiki 转换器中。

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

添加样式，需要 Tailwind CSS v4。

Tailwind CSS

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

添加 MDX 组件。

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 元字符串。

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

示例

了解更多关于 Twoslash notations。

Test

console.ggroup
groupCollapsed
groupEnd;

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

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.

缓存

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

source.config.ts

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

transformerTwoslash({
  typesCache: createFileSystemTypesCache(),
});

用法

示例

缓存

On this page