Include
Reuse content from other files.
Usage
Fumadocs MDX always enables Remark Include, on both unified and Sätteri.
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>Do not pass untrusted paths to <include>, it can embed any file on your machine, like .env.
For Markdown
Markdown (.md) files do not support JSX syntax. Use the directive syntax instead.
Sätteri parses directives by default. On unified, add the remark-directive remark plugin:
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 and 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:
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.In Markdown:
## Included Section
I'm here!
## Not Included
Some random text.How is this guide?
Last updated on
