Markdown 算繪

概覽複製錨點連結

fumadocs-core/server 會將 React 伺服器元件算繪為 Markdown 文件：

import { renderToMarkdown } from 'fumadocs-core/server';

const text = await renderToMarkdown(
  <div>
    <h2>Hello World</h2>
    <p>
      Some <b>rich</b> content.
    </p>
  </div>,
);

Remark LLMs 所匯出的元件即以它為基礎運作；凡是您想以 Markdown 形式提供的伺服器端算繪內容，也都能使用它。

asMarkdown複製錨點連結

元件會自行定義其 Markdown 形式。在算繪期間呼叫 asMarkdown() 即代表選擇啟用此功能：當元件正被算繪為 Markdown 時，它會回傳對應的目標，且元件回傳的 HTML 元素會一併轉換。

import { asMarkdown, md } from 'fumadocs-core/server';

function Callout({ title, children }) {
  if (asMarkdown()) return md.linePrefix('> ')`**${title}**\n${children}`;

  return <div className="...">...</div>;
}

未呼叫它的元件會以 JSX 語法連同其 props 一併保留，例如：

<Tabs items={['a', 'b']}>...</Tabs>

這也包括不會在伺服器上執行的用戶端元件。

目標複製錨點連結

樹會針對某個目標進行算繪，也就是 renderToMarkdown() 的 target 選項：

• markdown (預設) ：提供給 AI 代理的文件。
• search：搜尋紀錄的文字。其中保留連結的文字，但不含圖片與程式碼區塊；沒有 Markdown 形式的元件會輸出為 HTML 標籤，並附上其文字 props。

這些規則適用於元件回傳的元素，例如 <a href>。若在 md 範本中以純文字撰寫連結，搜尋結果仍會保留其連結目標，因此請回傳元素，或自行檢查目標。

asMarkdown() 會回傳目前的目標，因此元件可以提供給 AI 代理比搜尋索引更多的內容：

import { asMarkdown, md } from 'fumadocs-core/server';

function Version({ name, released }) {
  const target = asMarkdown();
  if (target === 'search') return name;
  if (target) return md`${name} (released ${released})`;

  return <span title={released}>{name}</span>;
}

md複製錨點連結

用於輸出 Markdown 的標籤樣板 (tagged template) ，插值可以是字串、React 節點、Promise，或由它們組成的陣列。您可以先用它將 children 轉為字串，再進行處理。

以下兩種變體會以區塊形式回傳內容：

• md.linePrefix(prefix)：為每一行加上前綴，例如以 '> ' 建立引用區塊。
• md.indent(size)：將每一行縮排。

renderRoute複製錨點連結

將頁面元素算繪為 Markdown；若其元件未呼叫 asMarkdown()，則回傳 undefined。

import { renderRoute } from 'fumadocs-core/server';

const text = await renderRoute(<Page params={params} />);

適合用來提供路由的 Markdown 版本：有選擇啟用的頁面會產生 Markdown，其他頁面則回傳 undefined，讓您可以改為回傳 404 或改用其他來源。