インクルード
他のファイルのコンテンツを再利用します。
使い方
Fumadocs MDX では、unified と Sätteri のどちらを使用する場合でも、Remark Include が常に有効になっています。
コンテンツ
別の Markdown/MDX ファイルのコンテンツを表示するには、<include> タグにそのファイルのパスを、インクルード元のファイルからの相対パスで指定します。
<include>./another.mdx</include>信頼できないパスを <include> に渡さないでください。.env など、マシン上のあらゆるファイルが埋め込まれるおそれがあります。
Markdown の場合
Markdown (.md) ファイルでは JSX 構文を使用できません。代わりにディレクティブ構文を使用してください。
Sätteri はデフォルトでディレクティブを解析します。unified を使用する場合は、remark プラグインの remark-directive を追加してください。
import { defineConfig } from 'fumadocs-mdx/config';
import remarkDirective from 'remark-directive';
export default defineConfig({
mdxOptions: {
remarkPlugins: [remarkDirective],
},
});HTML コメントや HTML コンテンツを扱うには、rehype-raw も必要になる場合があります。
CodeBlock
その他の種類のファイルは、コードブロックとして表示されます。
<include>./script.ts</include>
<include lang="md" meta='title="lib.md"'>
page.md
</include>コンテンツの一部の領域のみをインクルードすることもできます。
export function fn() {
//#region a
console.log('one');
//#endregion
}<include>./code.ts#a</include>cwd
相対パスを、現在のファイルではなく cwd を基準に解決します。
<include cwd lang="tsx" meta='title="lib.ts"'>
./script.ts
</include>抽出
コンテンツファイルを参照する際は、ドキュメントの一部だけをインクルードすることもできます。
セクション
<section /> タグで囲みます:
## Hello World
<section id="test">This is included</section>
This is not included.Markdown の場合:
## Hello World
:::section{#test}
This is included
:::
This is not included.見出し
特定の見出し配下のコンテンツをインクルードします。
## Included Section
ここに表示されます!
## Not Included
適当なテキストです。Markdown の場合:
## Included Section
I'm here!
## Not Included
Some random text.How is this guide?
最終更新日
