Markdown 特性

提示

这里只展示了一些常用的 Markdown 示例，如需更多可参考官方文档

扉页

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)

更多的扉页参数配置可参考 plugin-content-pages 插件 API 定义

链接

锚点

锚点写法
预览

第一处引用[^1]，这里是第二处引用[^2]


[^1]: 引用1
[^2]: 引用2

外部链接

外部链接
预览

- [我的博客](https://incoder.org)
- [我的应用](https://incoder.app)

内部链接

外部链接
预览

- [创建 Pages](../create-a-page.md)
- [创建 Docs](../create-a-document.md)

资源

图片缩放

.mdx 格式文件
.md 格式文件
预览

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

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

# 文章开始引出插件
import Zoom from 'react-medium-image-zoom';
  
# 文章内容处引入可缩放图片
<Zoom>
![docusaurus](undraw_docusaurus_mountain.svg)
</Zoom>

代码块

语法高亮支持 Markdown 代码块

高亮代码写法
预览

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

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

告示

Docusaurus 有一种特殊的语法来创建警告和标注

告示写法
预览

# 这里是备注
:::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

:::

选项卡

选项卡写法
预览

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

折叠

折叠写法
预览

<details>
  <summary><code>折叠：</code> 这里是可折叠标题 </summary>

这里面是内容，支持 Markdown，下面是一个 `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>

折叠： 这里是可折叠标题

这里面是内容，支持 Markdown，下面是一个 Tab 选卡

Apple
Orange
Banana

This is an apple 🍎

MDX and React 组件

MDX 可以使您的留档更具交互性，并允许在 Markdown 中使用任何 React 组件

MDX React 组件
预览

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

图表

Flowchart

Flowchart 写法
预览

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

Sequence diagram

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

更多的 Diagrams 写法，可参考 Mermaid

引用1 ↩
引用2 ↩

扉页​

链接​

锚点​

外部链接​

内部链接​

资源​

图片缩放​

代码块​

告示​

选项卡​

折叠​

MDX and React 组件​

图表​

Flowchart​

Sequence diagram​

Footnotes​

扉页

链接

锚点