コンテンツへスキップ
Fumadocs

Remark TS to JS

TypeScriptのコードブロックを、TypeScript版とJavaScript版の2つのタブを持つコードブロックに変換するremarkプラグインです。

使い方

依存関係をインストールします。

npm install fumadocs-docgen

Remark TS to JS は remark プラグインです。次のように設定に追加してください。

source.config.ts
import { remarkTypeScriptToJavaScript } from 'fumadocs-docgen/remark-ts2js';
import { defineConfig } from 'fumadocs-mdx/config';

export default defineConfig({
  mdxOptions: {
    remarkPlugins: [remarkTypeScriptToJavaScript],
  },
});

Remark NPM と同じ CodeBlockTabs コンポーネントを生成します。このコンポーネントは Fumadocs UI にデフォルトで含まれています。

これで、次のように TypeScript/TSX のコードブロックで有効にできます。

```tsx ts2js
import { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return <div>{children}</div>;
}
```
import { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return <div>{children}</div>;
}

How is this guide?

最終更新日