Markdown 的功能特性

Docusaurus 支持 Markdown 和一些额外的功能特性。

Front Matter

Markdown 文档在顶部通常有一些元数据，它被称作 Front Matter:

my-doc.md

---
id: my-doc-id
title: My document title
description: My document description
slug: /my-custom-url
---

## Markdown heading

Markdown text with [links](./hello.md)

链接

Docusaurus 支持常规的 Markdown 链接（使用 URL 路径或文件相对路径）。

一起来看看如何[创建一个页面](/create-a-page).

一起来看看如何[创建一个页面](./create-a-page.md).

渲染呈现的结果： 一起来看看如何创建一个页面。

图像

Docusaurus 支持常规的 Markdown 图像。

You can use absolute paths to reference images in the static directory (static/img/docusaurus.png):

![Docusaurus logo](/img/docusaurus.png)

You can reference images relative to the current file as well. This is particularly useful to colocate images close to the Markdown files using them:

![Docusaurus logo](./img/docusaurus.png)

代码块

Markdown code blocks are supported with Syntax highlighting.

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

src/components/HelloDocusaurus.js

function HelloDocusaurus() {
  return <h1>Hello, Docusaurus!</h1>;
}

Admonitions

Docusaurus has a special syntax to create admonitions and callouts:

:::tip[My tip]

Use this awesome feature option

:::

:::danger[Take care]

This action is dangerous

:::

My tip

Use this awesome feature option

Take care

This action is dangerous

MDX and React Components

MDX can make your documentation more interactive and allows using any React components inside Markdown:

export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '20px',
      color: '#fff',
      padding: '10px',
      cursor: 'pointer',
    }}
    onClick={() => {
      alert(`You clicked the color ${color} with label ${children}`)
    }}>
    {children}
  </span>
);

This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !

This is <Highlight color="#1877F2">Facebook blue</Highlight> !

This is Docusaurus green !

This is Facebook blue !