AI Magic 3D文档降价
如何撰写文档
简介
Fumadocs 为 MDX（一种标记语言）提供了许多有用的扩展。这里简单介绍一下Fumadocs UI默认的MDX语法。
MDX 不是 Fumadocs 唯一支持的格式。事实上，您可以使用任何渲染器，例如 next-mdx-remote 或 CMS。
降价
我们使用 GFM (GitHub Flavored 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
定制组件
请参阅所有 MDX 组件和可用选项。
标题
锚点会自动应用于每个标题，它会清理空格等无效字符。 （例如 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]您还可以将其与目录设置链接，例如：
# heading [toc] [#my-heading-id]要将人们链接到特定标题，请将标题 ID 添加到哈希片段：/page#my-heading-id。
前题
我们支持 YAML frontmatter。它是一种指定文档公共信息（例如标题）的方法。 将其放在文档的顶部。
---
title: Hello World
---
## Title有关 frontmatter 可用属性的列表，请参阅 页面约定]。
代码块
默认情况下使用 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>请注意，您可以添加 MDX 组件，而不是在 MDX 文件中导入它们。
console.log('A');console.log('B');使用 Typescript 双斜杠
使用悬停类型信息和检测到的类型错误编写 Typescript 代码块。
默认情况下不启用。参见Twoslash。
图片
所有内置内容源都能正确处理图像。
图像会自动针对 next/image 进行优化。
可选
您可以启用一些可选插件。
数学方程
使用 TeX 编写数学方程。
```mdx
f(x) = x * e^{2 pi i \xi x}
```f(x) = x * e^{2 pi i \xi x}要启用，请参阅数学集成。
软件包安装
生成用于通过包管理器 (JS/Node.js) 安装包的代码块。
```mdx
npm i next -D
```npm i next -D要启用，请参阅备注Install。
更多
你可以看到Fumadocs支持的插件列表。