Include

Usage

Content

To display content from another Markdown/MDX file, specify its path relative to the file itself in the <include> tag.

<include>./another.mdx</include>

For Markdown

Markdown (.md) files do not support JSX syntax. To use <include />, you need to configure remark-directive.

source.config.ts

import { defineConfig } from 'fumadocs-mdx/config';
import remarkDirective from 'remark-directive';

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

You may also need rehype-raw for HTML comments & content.

CodeBlock

For other types of files, it will become a codeblock:

<include>./script.ts</include>

<include lang="md" meta='title="lib.md"'>
  page.md
</include>

You can include only a region of content:

code.ts

export function fn() {
  //#region a
  console.log('one');
  //#endregion
}

<include>./code.ts#a</include>

`cwd`

Resolve relative paths from cwd instead of the current file:

<include cwd lang="tsx" meta='title="lib.ts"'>
  ./script.ts
</include>

Extraction

When referencing content files, you can only include a certain part of the document.

Section

Encapsulate by a <section /> tag:

## Hello World

<section id="test">This is included</section>

This is not included.

In Markdown:

## Hello World

:::section{#test}
This is included
:::

This is not included.

Heading

Include contents under a certain heading.

## Included Section

I'm here!

## Not Included

Some random text.