コンテンツへスキップ
Fumadocs

インクルード

他のファイルのコンテンツを再利用します。

使い方

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 を追加してください。

source.config.ts
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>

コンテンツの一部の領域のみをインクルードすることもできます。

code.ts
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?

最終更新日