Twoslash

使い方

デフォルトのコードシンタックスハイライターである Shiki には Twoslash インテグレーションがあるため、transformer を追加するだけで簡単に利用できます。型情報は、プロジェクトの作業ディレクトリを起点として、ネイティブ版の TypeScript 7 コンパイラによって解決されます。

npm install fumadocs-twoslash

サーバーバンドルから typescript を除外 (外部化) します。

next.config.mjs

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

transformerTwoslash は Shiki のトランスフォーマーです。rehype code プラグインの transformers に追加してください。

source.config.ts

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 コンポーネントを追加します。

components/mdx.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) {
  return {
    ...defaultComponents,
    ...Twoslash,
    ...components,
  } satisfies MDXComponents;
}

これで、コードブロックに twoslash メタ文字列を追加できます。

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

キャッシュ

必要に応じて、typesCache オプションでファイルシステムキャッシュを有効にできます。

source.config.ts

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

({
  : (),
});

例

詳しくは Twoslash の記法を参照してください。

.ggroup
groupCollapsed
groupEnd;

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

('test');

const  = '123';

.();

const  = '123';

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

使い方アンカーリンクをコピー

キャッシュアンカーリンクをコピー

例アンカーリンクをコピー

このページの内容

使い方

キャッシュ

例