Markdown

介紹

Fumadocs 為 MDX（一種標記語言）提供了許多實用的擴充功能。以下是 Fumadocs UI 預設 MDX 語法的簡要介紹。

MDX 不是 Fumadocs 唯一支援的格式。實際上，你可以使用任何渲染器，如 next-mdx-remote 或 CMS。

我們使用 GFM（GitHub 風格的 Markdown），這是 Markdown（CommonMark）的超集。請參見 GFM 規範。

# Heading

## Heading

### Heading

#### Heading

Hello World, **Bold**, _Italic_, ~~Hidden~~

```js
console.log('Hello World');
```

1. First
2. Second
3. Third

- Item 1
- Item 2

> Quote here

![alt](/image.png)

| Table | Description |
| ----- | ----------- |
| Hello | World       |

自動連結

內部連結使用 next/link 元件，允許預取並避免硬重載。

外部連結將獲得預設的 rel="noreferrer noopener" target="_blank" 屬性以增強安全性。

[My Link](https://github.github.com/gfm)

This also works: https://github.github.com/gfm.

MDX

MDX 是 Markdown 的超集，支援 JSX 語法。它允許你匯入元件，並直接在文件中使用它們，甚至匯出值。

import { Component } from './component';

<Component name="Hello" />

請參見 MDX 語法了解更多資訊。

卡片

對於新增連結很實用，預設包含。

<Cards>
  <Card
    href="https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating"
    title="Fetching, Caching, and Revalidating"
  >
    Learn more about caching in Next.js
  </Card>
</Cards>

Fetching, Caching, and Revalidating

Learn more about caching in Next.js

圖示

你可以為卡片指定圖示。

import { HomeIcon } from 'lucide-react';

<Cards>
  <Card icon={<HomeIcon />} href="/" title="Home">
    Go back to home
  </Card>
</Cards>

Go back to home

The home page of Fumadocs.

無 href

<Cards>
  <Card title="Fetching, Caching, and Revalidating">
    Learn more about `fetch` in Next.js.
  </Card>
</Cards>

Fetching, Caching, and Revalidating

Learn more about fetch in Next.js.

提示框

對於新增提示/警告很實用，預設包含。

<Callout>Hello World</Callout>

Hello World

標題

指定提示框標題。

<Callout title="Title">Hello World</Callout>

Title

Hello World

類型

你可以指定提示框的類型。

info（預設）
warn
error

<Callout title="Title" type="error">
  Hello World
</Callout>

Title

Hello World

自訂元件

請參見所有 MDX 元件和可用選項。

標題

每個標題會自動套用錨點，它會清理空格等無效字元。（例如，Hello World 變為 hello-world）

# Hello `World`

目錄設定

目錄 (TOC) 將基於標題生成，你還可以自訂標題的效果：

# Heading [!toc]

This heading will be hidden from TOC.

# Another Heading [toc]

This heading will **only** be visible in TOC, you can use it to add additional TOC items.
Like headings rendered in a React component:

<MyComp />

自訂錨點

你可以新增 [#slug] 來自訂標題錨點。

# heading [#my-heading-id]

你也可以將其與目錄設定鏈結起來，例如：

# heading [toc] [#my-heading-id]

要將使用者連結到特定標題，請將標題 ID 新增到雜湊片段：/page#my-heading-id。

前言

我們支援 YAML 前言。這是一種指定文件常見資訊（例如標題）的方式。將其放在文件頂部。

---
title: Hello World
---

## Title

有關前言可用屬性的清單，請參見頁面慣例。

程式碼區塊

預設使用 Rehype Code 支援語法醒目提示。

```js
console.log('Hello World');
```

你可以為程式碼區塊新增標題。

```js title="My Title"
console.log('Hello World');
```

醒目提示行

你可以透過新增 [!code highlight] 來醒目提示特定行。

```tsx
<div>Hello World</div>  // [\!code highlight]
<div>Hello World</div>
<div>Goodbye</div>
<div>Hello World</div>
```

醒目提示單字

你可以透過新增 [!code word:<match>] 來醒目提示特定單字。

```js
// [\!code word:config]
const config = {
  reactStrictMode: true,
};
```

差異比較

```ts
console.log('hewwo'); // [\!code --]
console.log('hello'); // [\!code ++]
```

console.log('hewwo'); 
console.log('hello');

分頁群組

你可以使用 <Tab /> 元件與程式碼區塊一起使用。

import { Tab, Tabs } from 'fumadocs-ui/components/tabs';

<Tabs items={['Tab 1', 'Tab 2']}>
  <Tab value='Tab 1'>
    ```ts
    console.log('A');
    ```
  </Tab>
  <Tab value='Tab 2'>
    ```ts
    console.log('B');
    ```
  </Tab>
</Tabs>