跳到主要内容
版本：2.4.0

Markdown 特性

文档是你的产品向用户展示的门面之一。 文从字顺、层次清晰的文章有助于用户快速了解您的产品。 我们的一致目标是帮助用户尽快找到所需要的信息。

Docusaurus 2 使用现代化工具来帮助你轻松撰写交互式文档。 你可以嵌入 React 组件，亦或是搭建用户可交互的实时代码编辑块。 就用代码呈现你的灵光一现，捕获你的受众的心吧！ 这可能是吸引潜在用户的最有效的方式。

important

本章节假定你使用 Docusaurus 官方的内容插件。

Standard features​

Markdown 是一种能让你撰写易读的格式化内容的语法。

We use MDX as the parsing engine, which can do much more than just parsing standard Markdown syntax, like rendering React components inside your documents as well.

### 我的文档章节

一些文本，包括**粗体**、_斜体_，和[链接](/)

![图片 alt 文本](/img/docusaurus.png)
http://localhost:3000

My Doc Section

Hello world message with some bold text, some italic text and a link

img alt

Markdown is declarative

Some may assume a 1-1 correlation between Markdown and HTML, e.g., ![Preview](/img/docusaurus.png) will always become <img src="/img/docusaurus.png" alt="Preview" />, as-is. However, that is not the case.

The Markdown syntax ![message](url) only declaratively tells Docusaurus that an image needs to be inserted here, but we may do other things like transforming a file path to URL path, so the generated markup may differ from the output of other Markdown renderers, or a naïve hand-transcription to the equivalent JSX/HTML code.

In general, you should only assume the semantics of the markup (``` fences become code blocks; > becomes quotes, etc.), but not the actual compiled output.

Front matter​

你可以用前言 (front matter) 来给你的 Markdown 文件添加元数据。 所有内容插件都有自己可接受的前言规范，并使用前言来丰富元数据，因为后者不能从内容或其他配置中完美地推断。

Front matter is provided at the very top of the file, enclosed by three dashes ---. The content is parsed as YAML.

---
title: 我的文档标题
其他内容:
  - 可以以
  - 对象: 或者
    数组: 的形式给出
---

Quotes​

Markdown 引文有着漂亮的样式：

> Easy to maintain open source documentation websites.
>
> — Docusaurus
http://localhost:3000

Easy to maintain open source documentation websites.

— Docusaurus

Details​

Markdown can embed HTML elements, and details HTML elements are beautifully styled:

### Details element example

<details>
  <summary>Toggle me!</summary>
  <div>
    <div>This is the detailed content</div>
    <br/>
    <details>
      <summary>
        Nested toggle! Some surprise inside...
      </summary>
      <div>😲😲😲😲😲</div>
    </details>
  </div>
</details>
http://localhost:3000

Details element example

Toggle me!
This is the detailed content

Nested toggle! Some surprise inside...
😲😲😲😲😲
备注

实际上，这些并不是真正的 HTML 元素，而是 React JSX 元素。我们接下来就会具体介绍它们！