VitePress

主题

Markdown 语法 ​

以 # 符号开头，后加空格，再加标题内容； # 符号个数据代表标题层级，最多支持六级：

Markdown 语法
markdown
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

三级标题

段落与换行 ​

段落：内容后添加一个空行。 换行：内容后添加两个空格，然后回车。

Markdown 语法
markdown
春晓

春眠不觉晓，处处闻啼鸟。  
夜来风雨声，花落知多少。

春晓

春眠不觉晓，处处闻啼鸟。
夜来风雨声，花落知多少。

引用 ​

以 > 符号开头，后加空格，再加引用内容；引用内容支持多级嵌套：

Markdown 语法
markdown
> 引用内容。

> 引用包含多行或多个段落，第一段。
>
> 内容后添加两个空格实现换行，第二段，第一行；  
> 内容后添加两个空格实现换行，第二段，第二行。

> 引用的嵌套，第一层。
>> 引用的嵌套，第二层。
>>> 引用的嵌套，第三层。

> 引用中使用其它 `Markdown` 语法：
>
> 1. 列表项目
> 1. 列表项目

引用内容。

引用包含多行或多个段落，第一段。

内容后添加两个空格实现换行，第二段，第一行；
内容后添加两个空格实现换行，第二段，第二行。

引用的嵌套，第一层。

引用的嵌套，第二层。

引用的嵌套，第三层。

引用中使用其它 Markdown 语法：

  1. 列表项目
  2. 列表项目

有序列表 ​

以数字开头，后加 . 符号，再加空格，再加列表项内容；列表项可以嵌套：

Markdown 语法
markdown
1. 有序列表 1
    1. 子列表 11
    2. 子列表 12
2. 有序列表 2
3. 有序列表 3
  1. 有序列表 1
    1. 子列表 11
    2. 子列表 12
  2. 有序列表 2
  3. 有序列表 3

列表项可以包含其它内容，内容必须以 4 个空格或 1 个制表符缩进：

Markdown 语法
markdown
1. 项目中包含多个段落

    段落内容。  
    段落内容。

    > 引用内容。

2. 项目中包含码块，缩进 4 个空格或 1 个制表符

    ```sh
    echo 'Hello World!';
    ```

  1. 项目中包含多个段落

    段落内容。
    段落内容。

    引用内容。

  2. 项目中包含码块，缩进 4 个空格或 1 个制表符

    sh
    echo 'Hello World!';

无序列表 ​

以 - 符号开头，后加空格，再加列表项内容；列表项可以嵌套：

Markdown 语法
markdown
- 无序列表 1
  - 嵌套子列表 11
  - 嵌套子列表 12
- 无序列表 2
- 无序列表 3
  • 无序列表 1
    • 嵌套子列表 11
    • 嵌套子列表 12
  • 无序列表 2
  • 无序列表 3

列表项可以包含其它内容，内容必须以 2 个空格缩进：

Markdown 语法
markdown
- 项目中包含多个段落

  段落内容。  
  段落内容。

- 项目中包含码块

  ```sh
  echo 'Hello World!';
  ```

  • 项目中包含多个段落

    段落内容。
    段落内容。

  • 项目中包含码块

    sh
    echo 'Hello World!';

代码 ​

代码块，使用连续的 3 个 ` 符号包裹代码块，同时指定语言类型以实现语法高亮：

Markdown 语法
markdown
```js
function fn () {
  var str = 'Hello World';
}
```
js
function fn () {
  var str = 'Hello World';
}

行内代码，使用 ` 符号包裹内容，实现行内代码：

Markdown 语法
markdown
行内代码如 `<title></title>` ，`` ` `` 是 Tab 键上方、数字 1 键左侧的按键。

行内代码如 <title></title> ，` 是 Tab 键上方、数字 1 键左侧的按键。

分隔线 ​

使用 3 个或更多的 * 符号：

Markdown 语法
markdown
***

行内方式：

Markdown 语法
markdown
[链接名称](链接地址)
[链接名称](链接地址 "标题文本")

[百度](https://www.baidu.com "百度")  
[Google](https://www.google.com.hk "谷歌")  
[Readme](./markdown.md "相对路径")

百度
Google
Readme

参考方式：

Markdown 语法
markdown
[链接名称][标识符]

[标识符]: 链接地址 "标题文本"
  • 标识符可以是字母、数字、空白或标点符号;
  • 参考方式便于集中管理链接内容。
Markdown 语法
markdown
[百度][baidu] [谷歌][google] [百度][1] [谷歌][2] [百度][==] [谷歌][--]

[baidu]: https://www.baidu.com "百度"
[google]: https://www.google.com.hk "谷歌"
[1]: https://www.baidu.com "百度"
[2]: https://www.google.com.hk "谷歌"
[==]: https://www.baidu.com "百度"
[--]: https://www.google.com.hk "谷歌"

百度 谷歌 百度 谷歌 百度 谷歌

自动链接：

Markdown 语法
markdown
<https://www.baidu.com>  
<wewelove88@gmail.com>

https://www.baidu.com
wewelove88@gmail.com

图片 ​

行内方式：

Markdown 语法
markdown
![图片名称](图片地址)
![图片名称](图片地址 "标题文本")

![It's Markdown!](https://dummyimage.com/100x40/888/fff&text=Markdown "It's Markdown!")
It's Markdown!
It's Markdown!

参考方式：

Markdown 语法
markdown
![图片名称][标识符]

[标识符]: 图片地址  "标题文本"
  • 标识符可以包含字母、数字，必须以字母开头，不能包含特殊字符;
  • 参考方式便于集中管理链接内容。
Markdown 语法
markdown
![It's Markdown!][Markdown]
![It's Markdown!][Markdown1]

[Markdown]: https://dummyimage.com/100x40/ddd/fff&text=Markdown "It's Markdown!"
[Markdown1]: https://dummyimage.com/100x40/888/fff&text=Markdown "It's Markdown!"

It's Markdown!
It's Markdown!

强调 ​

Markdown 语法
markdown
*斜体*
**强调**
***斜体 + 强调***

斜体强调斜体 + 强调

删除线 ​

Markdown 语法
markdown
~~删除线~~

删除线

表格 ​

使用 | 分隔单元格，使用 - 分隔表头和数据行：

Markdown 语法
markdown
| 表头 1 | 表头 2 |
| --- | --- |
| 单元格 11 | 单元格 21 |
| 单元格 12 | 单元格 22 |

建议 | 和 - 两侧保留空格，这样内容更加清晰。

表头 1表头 2
单元格 11单元格 21
单元格 12单元格 22

使用 : 实现单元格左右或居中对齐：

Markdown 语法
markdown
| 默认 | 左对齐 | 居中对齐 | 右对齐 |
| --- | :--- | :---: | ---: |
| 默认左对齐 | 此列文本左对齐 | 此列文本居中对齐 | 此列文本右对齐 |
| 左对齐 | 左对齐 | 居中对齐 | 右对齐 |
默认左对齐居中对齐右对齐
默认左对齐此列文本左对齐此列文本居中对齐此列文本右对齐
左对齐左对齐居中对齐右对齐

单元格合并：

md
| h1 | h2 | h3 | h4 |
| --- | --- | --- | --- |
| x11 | x12 | x13 {rowspan=2} | x14 |
| x21 {colspan=2} | x24 | | |

| A | B | C | D |
| --- | --- | --- | --- |
| A1 | B1  | C1  | D1 {rowspan=3} |
| A2 {colspan=2 rowspan=2} | B2  | C2  | D2 |
| A3 | B3  | C3  | D3 |
h1h2h3h4
x11x12x13x14
x21x24
ABCD
A1B1C1D1
A2B2
A3

语法嵌套：

Markdown 语法
markdown
| 强调 | 代码 | 链接 |
| --- | --- | --- |
| *百度*   | `Baidu`  | [百度](https://www.baidu.com) |
| **谷歌** | `Google` | [谷歌](https://www.google.com.hk) |
强调代码链接
百度Baidu百度
谷歌Google谷歌

字符转义 ​

反斜线 \ 转义特殊字符:

特殊字符
markdown
\ ` * _ {} [] () # + - . !
Markdown 语法
markdown
- 2 * 1 = 2

\- 2 * 1 = 2
  • 2 * 1 = 2

- (2 * 1) = - 2

兼容 HTML 语法 ​

直接引用 HTML 元素，元素的开始标签前和结束标签后各保留一个空行:

Markdown 语法
markdown

<table class="table" style="color:red;">
  <thead>
    <tr><th>#</th><th>代码</th><th>输出</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>date('Y-m-d')</td><td>2016-07-15</td></tr>
    <tr><td>2</td><td>date('Y-m-t')</td><td>2016-07-31</td></tr>
  </tbody>
</table>

<img src="https://dummyimage.com/100x40/ddd/fff&text=Markdown" alt="Markdown" />
#代码输出
1date('Y-m-d')2016-07-15
2date('Y-m-t')2016-07-31
Markdown

数学方程 ​

数学公式是 VitePress 通过插件扩展的语法，其它场景不支持。

Markdown 语法
markdown
勾股定律：$a^2 + b^2 = c^2$

当 $a \ne 0$ 时, 方程 $(ax^2 + bx + c = 0)$ 的解：

$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$

勾股定律：a2+b2=c2

当 a≠0 时, 求方程 (ax2+bx+c=0) 的解：

x=−b±b2−4ac2a

图表 ​

图表是 VitePress 通过插件扩展的语法，其它场景不支持。

Markdown 语法
markdown
```mermaid:no-line-numbers
---
config:
  theme: neutral
  darkMode: true
  flowchart:
    padding: 8
---
flowchart LR
  A[Christmas] -->|Get money| B(Go shopping)
  B --> C{Let me think}
  C -->|One| D[Laptop]
  C -->|Two| E[iPad]
  C -->|Three| F[Car]
```
mermaid
---
config:
  theme: neutral
  darkMode: true
  flowchart:
    padding: 8
---
flowchart LR
  A[Christmas] -->|Get money| B(Go shopping)
  B --> C{Let me think}
  C -->|One| D[Laptop]
  C -->|Two| E[iPad]
  C -->|Three| F[Car]
Markdown 语法
markdown
```mermaid:no-line-numbers
---
config:
  theme: neutral
  darkMode: true
  sequence:
    height: 30
---
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
```
mermaid
---
config:
  theme: neutral
  darkMode: true
  sequence:
    height: 30
---
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
Markdown 语法
markdown
```mermaid:no-line-numbers
---
config:
  theme: neutral
  darkMode: true
---
pie
  title Pets adopted by volunteers
  "Dogs" : 386
  "Cats" : 85
  "Rats" : 15
```
mermaid
---
config:
  theme: neutral
  darkMode: true
---
pie
  title Pets adopted by volunteers
  "Dogs" : 386
  "Cats" : 85
  "Rats" : 15
Markdown 语法
markdown
```mermaid:no-line-numbers
---
config:
  theme: neutral
  darkMode: true
---
erDiagram
  CUSTOMER ||--o{ ORDER : places
  CUSTOMER {
    string name
    string custNumber
    string sector
  }
  ORDER ||--|{ LINE-ITEM : contains
  ORDER {
    int orderNumber
    string deliveryAddress
  }
  LINE-ITEM {
    string productCode
    int quantity
    float pricePerUnit
  }
```
mermaid
---
config:
  theme: neutral
  darkMode: true
---
erDiagram
  CUSTOMER ||--o{ ORDER : places
  CUSTOMER {
    string name
    string custNumber
    string sector
  }
  ORDER ||--|{ LINE-ITEM : contains
  ORDER {
    int orderNumber
    string deliveryAddress
  }
  LINE-ITEM {
    string productCode
    int quantity
    float pricePerUnit
  }

更多请参考 Mermaid

参考 ​

基于 MIT 许可发布

版权所有 © 2024-2025 王皓