跳到主要内容

Markdown 功能

Docusaurus 支持标准 Markdown，并扩展了部分实用能力。

Front Matter​

Markdown 文件顶部可以写元数据（Front Matter）：

my-doc.md
---
id: my-doc-id
title: 文档标题
description: 文档描述
slug: /my-custom-url
---

## 标题

这里是正文，包含一个 [链接](./hello.md)。

链接​

支持绝对路径与相对路径：

查看 [创建页面](/create-a-page)。
查看 [创建页面](./create-a-page.md)。

图片​

支持使用静态目录的图片：

![Logo](/img/docusaurus.png)

也可以使用相对路径：

![Logo](./img/docusaurus.png)

代码块​

支持语法高亮：

```jsx title="src/components/Hello.js"
function Hello() {
  return <h1>Hello!</h1>;
}
```
src/components/Hello.js
function Hello() {
  return <h1>Hello!</h1>;
}

提示块​

:::tip[小提示]

这是一个提示块。

:::

:::warning[注意]

这是一个警告块。

:::
小提示

这是一个提示块。

注意

这是一个警告块。

MDX 与 React 组件​

MDX 允许在文档中直接使用 React 组件：

export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '12px',
      color: '#fff',
      padding: '4px 8px',
    }}>
    {children}
  </span>
);

这是 <Highlight color="#25c2a0">高亮文本</Highlight>。

这是 高亮文本。