コンテンツへスキップ
Fumadocs

Remark Files

コードブロックからファイルを生成します。

はじめに

このプラグインは、次のようなコードブロックを受け取ります。

```files
project
├── src
│   ├── index.js
│   └── utils
│       └── helper.js
├── package.json
```

これを次のように変換します。

<Files>
  <Folder name="project" defaultOpen>
    <Folder name="src" defaultOpen>
      <File name="index.js" />
      <Folder name="utils" defaultOpen>
        <File name="helper.js" />
      </Folder>
    </Folder>
    <File name="package.json" />
  </Folder>
</Files>

セットアップ

Remark Files は remark プラグインです。設定ファイルに追加してください。

source.config.ts
import { remarkMdxFiles } from 'fumadocs-core/mdx-plugins';
import { defineConfig } from 'fumadocs-mdx/config';

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

また、MDX コンポーネント <Files />、<Folder />、<File /> が定義済みであることを確認してください。

How is this guide?

最終更新日