Markdown 功能
Docusaurus 使用 Markdown 作为其主要内容创作格式。
你可以在10分钟内学习Markdown。
Docusaurus 使用现代工具帮助您创建交互式文档。
MDX 编译器将 Markdown 文件转换为 React 组件，并允许你在 Markdown 内容中使用 JSX。这使你可以轻松地在内容中插入 React 组件，并创建令人愉悦的学习体验。
MDX playground 是你新的最好的朋友！
它是一个非常有用的调试工具，展示了MDX编译器如何将Markdown转换为React。
选项：选择正确的格式（MDX或CommonMark）以及Docusaurus使用的以下插件：remark-gfm, remark-directive, rehype-raw。
MDX 与 CommonMark
Docusaurus 使用 MDX 编译器将 .md 和 .mdx 文件编译为 React 组件，但语法可能会根据您的设置有所不同。
MDX 编译器支持 2 种格式：
- MDX格式：一个强大的解析器，允许使用JSX
- CommonMark 格式：一个符合标准的 Markdown 解析器，不允许使用 JSX
默认情况下，Docusaurus v3 出于历史原因使用 MDX 格式处理所有文件（包括 .md 文件）。
可以通过使用siteConfig.markdown.format设置或mdx.format: md前置内容来选择加入CommonMark。
如果您计划使用CommonMark，我们推荐使用siteConfig.markdown.format: 'detect'设置。将根据文件扩展名自动选择适当的格式：
.md文件将使用CommonMark格式.mdx文件将使用MDX格式
CommonMark 支持是实验性的，目前有一些限制。
标准功能
Markdown 是一种语法，它使您能够以可读的语法编写格式化内容。
### My Doc Section
Hello world message with some **bold** text, some _italic_ text, and a [link](/)
我的文档部分
你好，世界消息，带有一些粗体文本，一些斜体文本和一个链接
<img alt="图片替代文本" class="img_vXGZ" decoding="async" height="200" loading="lazy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAT3UlEQVR42u1dCVQVV5pWXNt2N0czykl33KImZ7IgKgqIghq3KCDK+qowCek2c2K0Mx3idBxakzYxJnZiq3Gf6Bg7UdN2R51MxnTSia3gew9Rwccm7oqiiIK4sPxTt1hEHo9XvPVW1fe
Markdown is declarative
有些人可能认为Markdown和HTML之间存在一一对应的关系，例如， 总是会变成 
Markdown语法  只是声明性地告诉Docusaurus这里需要插入一张图片，但我们可能会做其他事情，比如将文件路径转换为URL路径，因此生成的标记可能与其他Markdown渲染器的输出不同，或者与手动转录为等效的JSX/HTML代码不同。
前言
前置内容用于向您的Markdown文件添加元数据。所有内容插件都有其自己的前置内容模式，并使用前置内容来丰富从内容或其他配置推断出的默认元数据。
前置内容位于文件的顶部，由三个破折号 --- 包围。内容被解析为 YAML。
---
title: My Doc Title
more_data:
- Can be provided
- as: objects
or: arrays
---
每个官方插件的API文档列出了支持的属性：
使用Markdown配置parseFrontMatter函数来提供您自己的前置解析器，或增强默认解析器。
可以重用默认解析器，并用您自己的自定义专有逻辑进行包装。这使得可以实现方便的前置转换、快捷方式，或通过Docusaurus插件不支持的前置与外部系统集成。
export default {
markdown: {
parseFrontMatter: async (params) => {
// 重用默认解析器
const result = await params.defaultParseFrontMatter(params);
// 处理前置描述占位符
result.frontMatter.description =
result.frontMatter.description?.replaceAll('{{MY_VAR}}', 'MY_VALUE');
// 创建您自己的前置快捷方式
if (result.frontMatter.i_do_not_want_docs_pagination) {
result.frontMatter.pagination_prev = null;
result.frontMatter.pagination_next = null;
}
// 重命名来自其他系统的不支持的前置
if (result.frontMatter.cms_seo_summary) {
result.frontMatter.description = result.frontMatter.cms_seo_summary;
delete result.frontMatter.cms_seo_summary;
}
return result;
},
},
};
引用
Markdown 引用样式美观：
> Easy to maintain open source documentation websites.
>
> — Docusaurus
易于维护的开源文档网站。
— Docusaurus
详情
Markdown 可以嵌入 HTML 元素，并且 details HTML 元素的样式非常美观：
### Details element example
<details>
<summary>Toggle me!</summary>
This is the detailed content
```js
console.log("Markdown features including the code block are available");
```
You can use Markdown here including **bold** and _italic_ text, and [inline link](https://docusaurus.io)
<details>
<summary>Nested toggle! Some surprise inside...</summary>
😲😲😲😲😲
</details>
</details>
详细信息元素示例
Toggle me!
这是详细内容
console.log("Markdown features including the code block are available");
你可以在这里使用Markdown，包括粗体和斜体文本，以及内联链接 😲😲😲😲😲嵌套切换！里面有一些惊喜...
你可能希望将你的段落。。如果有疑问，使用MDX playground来排查