# Fumadocs Core (the core library of Fumadocs): Markdown 算繪
URL: /zh-TW/docs/headless/utils/markdown
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/headless/utils/markdown.zh-TW.mdx

將 React 元素算繪為 Markdown。

## 概覽 [#overview]

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

```tsx tab="Input"
import { renderToMarkdown } from 'fumadocs-core/server';

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

```md tab="Output"
## Hello World

Some **rich** content.
```

[Remark LLMs](/docs/headless/mdx/remark-llms#jsx-elements) 所匯出的元件即以它為基礎運作；凡是您想以 Markdown 形式提供的伺服器端算繪內容，也都能使用它。

> `renderToMarkdown()` 僅能在伺服器端使用。

## `asMarkdown` [#asmarkdown]

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

```tsx
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 一併保留，例如：

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

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

### 目標 [#targets]

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

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

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

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

```tsx
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` [#md]

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

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

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

## `renderRoute` [#renderroute]

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

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

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

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