Skip to main content

Markdown Features

tip

Only some commonly used Markdown examples are shown here. If you need more, please refer to official document

Front Matter​

my-doc.md
---
# Unique identifier
id: my-doc-id
# Article Title
title: My document title
# Article description
description: My document description
# File path
slug: /my-custom-url
---

## Markdown heading

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

More title page parameter configurations can be referred to plugin-content-pages

Anchor point​

First citation[^1], Second citation[^2]


[^1]: citation1
[^2]: citation2
- [我的博客](https://incoder.org)
- [我的应用](https://incoder.app)
- [创建 Pages](../create-a-page.md)
- [创建 Docs](../create-a-document.md)

Resources​

Picture Zoom​

<!-- 文章开始引出插件 -->
import Zoom from 'react-medium-image-zoom';

<!-- 文章内容处引入可缩放图片 -->
<Zoom>
![docusaurus](../../static/img/undraw_docusaurus_mountain.svg)
</Zoom>

Code Block​

Syntax highlighting supports Markdown code blocks

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

Admonitions​

Docusaurus has a special syntax to create warnings and annotations.

# 这里是备注
:::note

This is some note

:::

# 这里是提示
:::tip[My tip]

Use this awesome feature option

:::

# 这里是信息
:::info

This is some info

:::

# 这里是警告
:::warning

This is some warning

:::

# 这里是危险
:::danger[Take care]

This action is dangerous

:::

Tabs​

```jsx
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
  <TabItem value="apple" label="Apple" default>
    This is an apple 🍎
  </TabItem>
  <TabItem value="orange" label="Orange">
    This is an orange 🍊
  </TabItem>
  <TabItem value="banana" label="Banana">
    This is a banana 🍌
  </TabItem>
</Tabs>
```

Fold​

<details>
  <summary><code>Fold: </code>This is a foldable title </summary>

Here is the content, supporting Markdown, and the following is a `Tab` tab.

<Tabs>
  <TabItem value="apple" label="Apple" default>
    This is an apple 🍎
  </TabItem>
  <TabItem value="orange" label="Orange">
    This is an orange 🍊
  </TabItem>
  <TabItem value="banana" label="Banana">
    This is a banana 🍌
  </TabItem>
</Tabs>

</details>

MDX and React Components​

MDX It can make your file retention more interactive and allow the use of any React component in Markdown

```jsx
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> !
```

Mermaid​

Flowchart​

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

Sequence diagram​

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop HealthCheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

For More Diagrams, Please Refer To Mermaid

Footnotes​

  1. citation1 ↩

  2. citation2 ↩

Last updated on