Markdown
如何撰寫文檔
介紹
Fumadocs 為 MDX（一種標記語言）提供了許多有用的擴展。以下是 Fumadocs UI 預設 MDX 語法的簡要介紹。
MDX 不是 Fumadocs 唯一支持的格式。實際上，您可以使用任何渲染器，如 next-mdx-remote 或 CMS。
Markdown
我們使用 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
| 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>圖標
您可以為卡片指定圖標。
import { HomeIcon } from 'lucide-react';
<Cards>
<Card icon={<HomeIcon />} href="/" title="Home">
Go back to home
</Card>
</Cards>無 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>標題
指定提示框標題。
<Callout title="Title">Hello World</Callout>Title
類型
您可以指定提示框的類型。
info（預設）warnerror
<Callout title="Title" type="error">
Hello World
</Callout>Title
Hello World
自定義組件
標題
每個標題會自動應用錨點，它會清理空格等無效字符。（例如，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');
```高亮行
```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>注意，您可以在 MDX 文件中添加 MDX 組件，而不必導入它們。
console.log('A');console.log('B');使用 Typescript Twoslash
編寫帶有懸停類型資訊和檢測到類型錯誤的 Typescript 代碼塊。
預設情況下未啟用。參見 Twoslash。
圖片
所有內置內容源都能正確處理圖片。
圖片會自動為 next/image 優化。
可選功能
一些您可以啟用的可選插件。
更多文章
郵件列表
加入我們的社區
訂閱郵件列表，及時獲取最新消息和更新