跳转至主内容
Version: 2.0.0-beta.21 🚧

Markdown 特性

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

Docusaurus 2 uses modern tooling to help you compose your interactive documentation with ease. 您可以嵌入 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.

### My Doc Section

Hello world message with some **bold** text, some _italic_ text, and a [link](/)

![img 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.

Quotes

Markdown quotes are beautifully styled:

> 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...
😲😲😲😲😲
note

In practice, those are not really HTML elements, but React JSX elements, which we'll cover next!