Markdown
如何编写文档
介绍
Fumadocs 为 MDX（一种标记语言）提供了许多有用的扩展。这里简要介绍 Fumadocs 的默认 MDX 语法。
MDX 不是 Fumadocs 支持的唯一格式。事实上，您可以使用任何渲染器，如无头 CMS。
MDX
我们推荐 MDX，它是 Markdown 的超集，支持 JSX 语法。 它允许您导入组件，并在文档中使用它们，甚至编写 JavaScript。
请参阅：
import { Component } from './component';
<Component name="Hello" />
## Heading
### Heading
#### Heading
Hello World, **Bold**, _Italic_, ~~Hidden~~
1. First
2. Second
3. Third
- Item 1
- Item 2
> Quote here
| Table | Description |
| ----- | ----------- |
| Hello | World |Frontmatter
Fumadocs 默认支持基于 YAML 的 frontmatter，title 表示 Fumadocs UI 中的页面标题（h1）。
---
title: This is a document
---
...在 Fumadocs MDX 中
您可以使用 schema 选项来添加 frontmatter 属性。
自动链接
内部链接使用您的 React 框架的 <Link /> 组件（例如 next/link），以允许预取并避免硬重载。
外部链接将默认获取 rel="noreferrer noopener" target="_blank" 属性，以确保安全性。
[My Link](https://github.github.com/gfm)
This also works: https://github.github.com/gfm.卡片
用于添加链接很有用。
import { HomeIcon } from 'lucide-react';
<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>
<Card title="href is optional">Learn more about `fetch` in Next.js.</Card>
<Card icon={<HomeIcon />} href="/" title="Home">
You can include icons too.
</Card>
</Cards>Fetching, Caching, and Revalidating
Learn more about caching in Next.js
href is optional
fetch in Next.js.Home
You can include icons too.
“进一步阅读” 部分
您可以这样做：
import { getPageTreePeers } from 'fumadocs-core/server';
import { source } from '@/lib/source';
<Cards>
{getPageTreePeers(source.pageTree, '/docs/my-page').map((peer) => (
<Card key={peer.url} title={peer.name} href={peer.url}>
{peer.description}
</Card>
))}
</Cards>;这将以卡片形式显示同一文件夹中的其他页面。
提醒框
用于添加提示/警告，默认包含。您可以指定提醒框的类型：
info(默认)warn/warningerrorsuccess
<Callout>Hello World</Callout>
<Callout title="Title">Hello World</Callout>
<Callout title="Title" type="error">
Hello World
</Callout>Title
Hello World
Title
Hello World
标题
每个标题都会自动应用锚点，它会清理无效字符，如空格。（例如 Hello World 变为 hello-world）
# Hello `World`TOC 设置
目录 (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]您还可以将其与 TOC 设置链式使用：
# heading [toc] [#my-heading-id]要将人们链接到特定标题，请将标题 ID 添加到哈希片段：/page#my-heading-id。
代码块
默认支持语法高亮，使用 Rehype Code。
```js
console.log('Hello World');
```
```js title="My Title"
console.log('Hello World');
```行号
显示行号，它也适用于 Twoslash 和其他转换器。
```ts twoslash lineNumbers
const a = 'Hello World';
// ^?
console.log(a);
```您可以设置行号的初始值。
```js lineNumbers=4
function main() {
console.log('starts from 4');
return 0;
}
```Shiki 转换器
我们支持一些 Shiki Transformers，允许您高亮/样式特定行。
```tsx
// highlight a line
<div>Hello World</div> // [!code highlight]
// highlight a word
// [!code word:Fumadocs]
<div>Fumadocs</div>
// diff styles
console.log('hewwo'); // [!code --]
console.log('hello'); // [!code ++]
// focus
return new ResizeObserver(() => {}) // [!code focus]
```选项卡组
```ts tab="Tab 1"
console.log('A');
```
```ts tab="Tab 2"
console.log('B');
```console.log('A');默认情况下禁用，您可以通过配置 remark 插件在选项卡值中使用 MDX：
import { defineConfig } from 'fumadocs-mdx/config';
export default defineConfig({
mdxOptions: {
remarkCodeTabOptions: {
parseMdx: true,
},
},
});```ts tab="<Building /> Tab 1"
console.log('A');
```
```ts tab="<Rocket /> Tab 2"
console.log('B');
```console.log('A');Include
这仅在 Fumadocs MDX 中可用。
引用另一个文件（也可以是 Markdown/MDX 文档）。
在 <include> 标签中指定目标文件路径（相对于 MDX 文件本身）。
<include>./another.mdx</include>请参阅 include 的其他用法。
NPM 命令
用于生成不同包管理器的安装包命令很有用。
```npm
npm i next -D
```使用 Fumadocs MDX 时，您可以像这样自定义它：
import { defineConfig } from 'fumadocs-mdx/config';
export default defineConfig({
mdxOptions: {
remarkNpmOptions: {
// ...
},
},
});其他组件
您可以配置并在 MDX 文档中使用 内置组件，如选项卡、折叠面板和可缩放图像。
附加功能
您可能感兴趣：
How is this guide?
Last updated on