# Fumadocs Core (the core library of Fumadocs): Remark Files
URL: /zh-TW/docs/headless/mdx/remark-mdx-files
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/headless/mdx/remark-mdx-files.zh-TW.mdx

從程式碼區塊產生檔案。

## 簡介 [#introduction]

此外掛會將像這樣的程式碼區塊：

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

並將其轉換為：

```mdx
<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>
```

## 設定 [#setup]

Remark Files 是一個 remark 外掛，請將它加入您的設定檔中：

```ts tab="unified" title="source.config.ts"
import { remarkMdxFiles } from 'fumadocs-core/mdx-plugins';
import { defineConfig } from 'fumadocs-mdx/config';

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

```ts tab="Sätteri" title="source.config.ts"
import { remarkMdxFiles } from '@fumadocs/satteri/remark-mdx-files';
import { defineConfig, defineDocs } from 'fumadocs-mdx/config';

export const docs = defineDocs({
  docs: { compiler: 'satteri' },
});

export default defineConfig({
  satteriOptions: {
    mdastPlugins: [remarkMdxFiles()],
  },
});
```

另外，請確認您已定義 `<Files />`、`<Folder />` 和 `<File />` 這幾個 MDX 元件。