Remark LLMs

remarkLLMs プラグインは、ドキュメントのMarkdownをLLM向けに _markdown としてエクスポートします。記述したMarkdownはそのまま保持されます。生成の仕組みについては文字列化を参照してください。

import { Callout } from 'fumadocs-ui/components/callout';

## Getting Started

<Callout>Hello **world**.</Callout>

Fumadocs MDX では、ESM が削除され、見出しに ID が付与され (headingIds を参照) 、インクルードされたコンテンツが展開されます。

使い方アンカーリンクをコピー

remarkLLMs は remark プラグインです。Fumadocs MDX では、includeProcessedMarkdown を使って有効にします。unified と Sätteri のどちらにも対応しています。

import { defineDocs } from 'fumadocs-mdx/config';

export const docs = defineDocs({
  docs: {
    postprocess: {
      // `true`、または `remarkLLMs` のオプション
      includeProcessedMarkdown: true,
    },
  },
});

ページからは getText('processed') で読み取ります。このメソッドは、ページの props を使って Markdown をレンダリングします。

const markdown = await page.data.getText('processed');

画像アンカーリンクをコピー

ページと同じ場所に置かれ、Remark Image によってインポートされた画像には、バンドラーが配信する際のURLが割り当てられます。

![How a calculation flows](./flow.png)

public ディレクトリ内の画像は、元のアドレスがそのまま維持されます。Vite は、build.assetsInlineLimit より小さい画像を data: URL としてインライン化します。

出力アンカーリンクをコピー

output オプションでは、_markdown の形式を設定します。

• function: _markdown はコンポーネントになり、renderToMarkdown() でレンダリングします。Markdown はページの props を使って生成されます。<show> 内でレンダリングされないコンテンツは除外され、式はその値に、JSX 要素は Markdown 形式に置き換えられます。
• string: _markdown は文字列になります。式と JSX 要素はソースのテキストのまま残り、<show> を含むドキュメントはコンパイルに失敗します。

デフォルトは、Fumadocs MDX と @fumadocs/astro では function、それ以外では string です。カスタムのコンテンツソースでは、ランタイム出力を使う場合に function になります。

JSX 要素アンカーリンクをコピー

output: 'function' を指定すると、コンポーネントは MDX と同じ方法で解決されます。まずファイル内のインポートと宣言から探し、見つからなければページの props に含まれる MDX コンポーネントから探します。MDX コンポーネントは getPage() でページに渡します。

const page = source.getPage(slugs, { props: { components } });

コンポーネントは asMarkdown() で自身の Markdown 形式を定義します。定義されていないコンポーネントは JSX のまま残ります。要素を削除したり、その子要素に置き換えたりするには、filterElement を使用してください (Sätteri では使用できません) 。

プレースホルダーアンカーリンクをコピー

JSX 要素を自前でレンダリングするには、プレースホルダーとして列挙します。

import type { LLMsOptions } from 'fumadocs-core/mdx-plugins/remark-llms';

const llmsOptions: LLMsOptions = {
  mdxAsPlaceholder: ['Callout'],
};

次に、必要に応じて実行時のデータを使い、それらをレンダリングします。

import { renderPlaceholder } from 'fumadocs-core/mdx-plugins/remark-llms.runtime';

const markdown = await renderPlaceholder(await page.data.getText('processed'), {
  // `children` は要素の中身を Markdown にしたものです
  Callout: ({ attributes, children }) => `> **${attributes.title}**\n>\n> ${children}`,
});

Sätteri では mdxAsPlaceholder を使用できません。

オプションアンカーリンクをコピー