Remark Files

Introduction

This plugin takes a codeblock like:

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

and convert into:

<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

Add the remark plugin:

source.config.ts

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

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

And make sure you have defined <Files />, <Folder />, <File /> MDX components.

Introduction

Setup

On this page