---
created: 2021-08-09 10:18
modified: 2022-01-12 周三 21:40
aliases: [Markdown教程,MD教程]
tags: ["#Markdown #Obsidian"]
---
Note：本文章来自于Obsidian论坛的[MarkDown语法 超详细教程](https://forum-zh.obsidian.md/t/topic/435/1)
# 什么是 Markdown?
1. **Markdown** 是一款轻量级标记语言，不同于HTML **(Hypertext Markup Language)**，**Markdown** 的语法非常简单，且容易上手
2. **Markdown** 以 **纯文本格式** 编写文档，依赖键盘而非鼠标，专注于**写作本身**，感受**书写**的魅力
3. **Markdown** 的通过添加一些简单的 **标识符**，让文本具有**恰到好处**的格式
4. **Markdown** 核心特征就是 **删繁剪芜**， **简扼** + **精炼**
5. **Markdown** 是 **笔记** 与 **网页文章** 的最佳载体
6. **Down** 的核心：坐 **下** 来，就能把思维写 **下** 来
- **牛津高阶英汉双解词典第九版** 中，关于 **down** 的释义：
# ** × 标题级数 + **空格 ** + 文本内容
```md
这是一段普通的文本
# 这是一级标题
## 这是二级标题
### 这是三级标题
#### 这是四级标题
##### 这是五级标题
###### 这是六级标题
```
_ ** )
- **说明：**
- 粗体文本，首尾各有 **两个** 标识符
```md
这是一段普通文本
**这里是一段加粗文本**
__这也是一段加粗文本__
```
#### 示范
这是一段普通文本
**这里是一段加粗文本**
__这也是一段加粗文本__
_ )
3. `**_` + 文本内容 + `_**`
4. `__*` + 文本内容 + `*__`
5. `*__` + 文本内容 + `__*`
6. `_**` + 文本内容 + `**_`
- **说明：**
- 粗斜体文本，首尾各有 **三个** 标识符
```md
这是一段普通文本
***粗斜体文本1***
___粗斜体文本2___
**_粗斜体文本3_**
__*粗斜体文本4*__
*__粗斜体文本5__*
_**粗斜体文本6**_
```
#### 示范
这是一段普通文本
***粗斜体文本1***
___粗斜体文本2___
**_粗斜体文本3_**
__*粗斜体文本4*__
*__粗斜体文本5__*
_**粗斜体文本6**_
_ ** )
3. `*` + 斜体文本 + `__` + 粗体文本 + `__` + 斜体文本 + `*`
4. `_` + 斜体文本 + `**` + 粗体文本 + `**` + 斜体文本 + `_`
- **说明：**
- **斜体** 中包含 **粗体**，其实就是嵌套的关系，**外层** 是 **斜体**，**内层** 是 **粗体**
- 外层是**斜体**，标识符是**单个**；内层是**粗体**，标识符是**两个**
- 因为 **粗体** 是被包裹在 **斜体** 中的，所以显示效果为 **斜粗体**
```md
这是一段普通文本
*这里是一段斜体中**包含粗体**的文字*
_这也是一段斜体中**包含粗体**的文字_
*这又是一段斜体中__包含粗体__的文字*
_这还是一段斜体中**包含粗体**的文字_
```
#### 示范
这是一段普通文本
*这里是一段斜体中**包含粗体**的文字*
_这也是一段斜体中**包含粗体**的文字_
*这又是一段斜体中__包含粗体__的文字*
_这还是一段斜体中**包含粗体**的文字_
_ ** )
3. `**` + 粗体文本 + `_` + 斜体文本 + `_` + 粗体文本 + `**`
4. `__` + 粗体文本 + `*` + 斜体文本 + `*` + 粗体文本 + `__`
- **说明：**
- **粗体** 中包含 **斜体**，也就是嵌套的关系，**外层** 是 **粗体**，**内层** 是 **斜体**
- 外层是**粗体**，标识符是**两个**；内层是**斜体**，标识符是**单个**
- 因为 **斜体** 是被包裹在 **粗体** 中的，所以显示效果为 **粗斜体**
```md
这是一段普通文本
**这里是一段粗体中*包含斜体*的文字**
__这也是一段粗体中_包含斜体_的文字__
**这又是一段粗体中_包含斜体_的文字**
__这还是一段粗体中*包含斜体*的文字__
```
#### 示范
这是一段普通文本
**这里是一段粗体中*包含斜体*的文字**
__这也是一段粗体中_包含斜体_的文字__
**这又是一段粗体中_包含斜体_的文字**
__这还是一段粗体中*包含斜体*的文字__
~ ** 波浪号
```md
~~这是一段加了删除线的文本~~
```
#### 示范
~~这是一段加了删除线的文本~~
`** + 文本内容 + **` `**
```html
这是一段加了下划线的文本
```
#### 示范
这是一段加了下划线的文本
空格 ** + 文本内容
- **说明：**
- 输入文本内容后，敲击 **Enter ** 自动补全格式，并进入 **下个** 有序列表
- 若需要在同个列表内，增加 **换行显示** 的内容 (**但不进入下个列表**)
敲击 **Shift ** + **Enter ** ，即可另起一行输入文本
- 在有序列表的中间，插入一个新的列表，后面列表的 **数字序号** 会自动 **递进** 一层
- 即便在源代码模式中修改了数字序号，渲染界面依然是 **依照顺序** 显示的
```md
1. 这是第一个有序列表
2. 这是第二个有序列表
3. 这是第三个有序列表
1. 这是第一个有序列表
这是同个列表下，另起一行的文本内容
2. 这是第二个有序列表
这是同个列表下，另起一行的文本内容
```
#### 示范
1. 这是第一个有序列表
2. 这是第二个有序列表
3. 这是第三个有序列表
1. 这是第一个有序列表
这是同个列表下，另起一行的文本内容
2. 这是第二个有序列表
这是同个列表下，另起一行的文本内容
#### 补充
- 由于有序列表存在**强制排序性**，它的数字序号必然是**逐一递进**的
若你希望内容前的数字，不依照**递进顺序**排序，或者以 **整百**，**整十数** 排序
- 可以配合**无序列表**，在无序列表中输入：
- `数字` + `.` + 内容
#注意 点号 与 内容 之间，**没有空格** (其实有空格也行，就是会感觉有点奇怪)
```md
- 10.这是无序列表下，整十数排列的内容
- 20.这是无序列表下，整十数排列的内容
- 30.这是无序列表下，整十数排列的内容
- 100.这是无序列表下，整百数排列的内容
- 200.这是无序列表下，整百数排列的内容
- 300.这是无序列表下，整百数排列的内容
```
**效果：**
- 10.这是无序列表下，整十数排列的内容
- 20.这是无序列表下，整十数排列的内容
- 30.这是无序列表下，整十数排列的内容
- ** + **空格 ** + 文本内容
- **说明：**
- 输入文本内容后，敲击 **Enter ** 自动补全格式，并进入 **下个** 无序列表
- 若需要在同个列表内，增加**换行**显示的内容 (**但不进入下个列表**)
敲击 **Shift ** + **Enter ** ，即可另起一行输入文本
- **补充：**
- 在**Obsidian**中，按下 **Ctrl ** + **Enter **
- 即可快速生成一个无序列表
```md
- 这是第1个无序列表
- 这是第2个无序列表
- 这是第3个无序列表
- 这是第一个无序列表
这是同个列表下，另起一行的文本内容
- 这是第二个无序列表
这是同个列表下，另起一行的文本内容
```
#### 示范
- 这是第1个无序列表
- 这是第2个无序列表
- 这是第3个无序列表
> ** + 文本内容 （**不需要空格**)
- **说明：**
- **同个引用段落**内的换行直接敲击 **Enter ** 即可
- 若需添加 **第二个独立引用段落** ，连续敲击 **两下** **Enter ** 即可
```markdown
>这是第一段引用文本的第1行
>这是第一段引用文本的第2行
>这是第二段引用文本的第1行
>这是第二段引用文本内第2行
```
#### 示范
>这是第一段引用文本的第1行
>这是第一段引用文本的第2行
>这是第二段引用文本的第1行
>这是第二段引用文本的第2行
Tab **
2. **Ctrl ** + **[ ** (左中括号)
- **退格：**
1. **Shift ** + **Tab **
2. **Ctrl ** + **] ** （右中括号）
> 来完成 **缩进**
- 引用的 **退格** 与列表 **相同**
1. **Shift ** + **Tab **
2. **Ctrl ** + **] ** （右中括号）
```md
>第一级引用1
>>第二级引用1
>>第二级引用2
>第一级引用2
```
##### 示范
>第一级引用1
>>第二级引用1
>>第二级引用2
>
>第一级引用2
Shift ** + **Enter ** **&** **Enter ** **&** **Shift ** + **Tab ** ( 或 **Ctrl ** + **[ ** )
- **Shift ** + **Enter ** 在切换格式的嵌套中，是 自带一层 **缩进** 效果的
```md
1. 第一级 有序列表1
- 第二级 无序列表1
>第三级 引用1
- 第四级 无序列表2
1. 第五级 有序列表2
- 第四级 无序列表3
>第三级 引用2
- 第二级 无序列表4
2. 第一级 有序列表3
```
##### 示范
1. 第一级 有序列表1
- 第二级 无序列表1
> 第三级 引用1
>
> - 第四级 无序列表2
> 1. 第五级 有序列表2
> - 第四级 无序列表3
>
> 第三级 引用2
- 第二级 无序列表4
2. 第一级 有序列表3
#### 4.4.5 Obsidian 的一些缩退问题
- **Obsidian** 在列表首行使用缩进的时候，后续的列表会出现一些问题
- `Tab` 和 `Shift + tab` 会无法 缩进 退格
- 可以使用 `Ctrl + ]` 与 `Ctrl + [` 来解决问题
```md
- - 这是第一段就被缩进的列表
- 这是第二段被再次缩进的列表
- 这是第三段列表
```
- - 这是第一段就被缩进的列表
- 这是第二段被再次缩进的列表
- 这是第三段列表
[ ** + 显示文本内容 + **] ** + **( ** + 链接地址 + **空格 ** + **" ** + 提示信息文本 + **" ** + **) **
- **说明：**
- 显示文本内容，是在渲染界面实际 **可见** 的文本，用以 **说明** 链接
- 提示信息文本，需鼠标悬停于 **显示文本内容** 方可触发，用于增加额外提示信息
- #注意 **`"提示信息文本"`** 是**可选项**，一般不会填
- 一般来讲，需按住 **Ctrl ** + **`鼠标左键点击`** 才可跳转链接，不过也有 **直接鼠标点击** 就能跳转的
```md
[显示文本内容](链接地址 "提示信息文本")
[百度一下，你就知道](http://www.baidu.com "按住Ctrl点击跳转百度")
```
**示范：**
[百度一下，你就知道](http://www.baidu.com "按住Ctrl点击跳转百度")
** 加在 ==显示文本内容==的首尾
- **格式1：**`[**显示文本内容**](链接地址)`
- **效果：** [**百度一下，你就知道**](http://www.baidu.com)
2. 把一对 ** 加在 链接格式==整体== 的首尾
- **格式2：**`**[显示文本内容](链接地址)**`
- **效果：** **[百度一下，你就知道](http://www.baidu.com)**
! ** (英文格式的)，**`!`** 代表 **可见**
- 图片的提示信息，和网页链接一样，写在 **`" "`** 内
- **`[ ]`** 方括号里的文字信息在 **Markdown** 没啥实质的作用，只是方便在源代码模式下，知道这个图片是什么，在渲染界面是不会显示的。有点类似于HTML **img标签** 里的 **alt属性**。
```md
```
- **补充：**
- 图像链接可以是**本地**的，也可以是**在线**的
- 本地图像直接 **`Ctrl + C`** 黏贴，**`Ctrl + V`** 复制 就可以
- 在线图像推荐使用 [图床](https://imgtu.com/ "这是一个在线图床网址")
- 调整图像的大小需要使用 HTML 和 CSS，在 **Typora编辑器** 中右键可以直接缩放图片
本质是转成了HTML的格式，最后会有一个 `style="zoom: %;"` ，这里数值可以自己修改
- 如果有使用 **Obsidian** 的朋友，在线图片链接是通用的。不过，因为 **Obsidian** 是双向链笔记
它的**本地图片**格式不太一样
- **`![[图片名]]`**
- **Obsidian** 中的图片是以**双链**的格式引用在目标笔记中，用 **! ** 使它可见
- **Obsidian**的图片设置大小是用 **| ** 分隔，后面写宽度数值，单位是px。
设定好宽度，高度会自动**等比例调整**
- `![[图片名|宽度数值]]`
- 若想自主调整图片宽高，则用：
- `![[图片名|宽度数值x高度数值]]`
- #提示 这里的 `x` 是 英文字母**x**
- 如果是**在线图床**，需要调整图片大小：
- ``
#### 示范
| ** 是构成表格的主要 **框架**
- **- ** 区分 **表头** 和 **表格主体**
- **: ** 控制 表格内 **文本内容** 的 **对齐方式**
- **Typora编辑器中 ** 输入 **`Ctrl + T`** 即可快速插入表格，自由定义样式
```md
|这里是表头1|这里是表头2|这里是表头3|
|:-|:-:|-:|
|单元格数据1|单元格数据2|单元格数据3|
|单元格数据4|单元格数据5|单元格数据6|
```
### 示范
| 这里是表头1 | 这里是表头2 | 这里是表头3 |
| :-- | :-:| -: |
| 单元格数据1 | 单元格数据2 | 单元格数据3 |
|单元格数据4|单元格数据5|单元格数据6|
` ** 反引号 ，在中间写代码内容
- **补充：**
- 行内代码不一定非得写代码，也可以作为**`着重标记`**，突出显示内容
- 行内代码中，源代码界面和渲染界面是完全一致的，标识符会失效
- **所谓行内代码：** 只要你的屏幕足够宽，它就不会换行
```md
`这是一段行内代码`
``
`print("Hello, World!")`
`这是一行突出显示的文本内容`
```
#### 示范
``
` ** 反引号
- **`` ``` ``** + 语言种类
代码内容
**`` ``` ``**
2. 在首行和末行各加 **三个** **~ ** 波浪号
- **`~~~`** + 语言种类
代码内容
**`~~~`**
- **补充：**
- 在代码块也不一定要写代码，可以写**一段**突出的文本内容，语言类型可以填写 **txt** 或者 **干脆不写**
- 代码块中，源代码界面和渲染界面是完全一致的，标识符会失效
- 在 **Typora编辑器** ，用键盘按键脱离代码块区域，需输入： **Ctrl + Enter **
````md
```语言种类
代码内容
代码内容
代码内容
```
下面是HTML代码块
```html
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
```
下面是CSS代码块
```css
.box {
width: 600px;
height: 400px;
margin: 100px auto;
background-image: linear-gradient(black 33.3%,red 33.3%, red 66.6%, yellow 66.6%, yellow);
}
```
下面是JavaScript代码块
```js
// 定义一个30个整数的数组，按顺序分别赋予从2开始的偶数；然后按顺序每五个数求出一个平均值，放在另一个数组中并输出。试编程
let arr = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60]
let newarr = [];
for (let i = 0, count = 0, sum = 0, len = arr.length; i < len; i++) {
sum += arr.shift();
count++;
if (count % 5 === 0) {
newarr.push(sum / 5);
sum = 0;
}
}
console.log(newarr);
let arr = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60]
let newarr = [];
for (let i = 0, len = arr.length; i < len / 5; i++) {
let subarr = arr.splice(0, 5)
for (let j = 0, sum = 0; j < subarr.length; j++) {
sum += subarr[j];
}
newarr.push(sum / 5);
}
console.log(newarr);
```
下面是Python代码块
```python
#!/usr/bin/python
# -*- coding: UTF-8 -*-
i = 2
while(i < 100):
j = 2
while(j <= (i/j)):
if not(i%j): break
j = j + 1
if (j > i/j) : print i, " 是素数"
i = i + 1
print "Good bye!"
```
下面是一块突出显示的文本
```txt
这是一段
突出显示的
文本内容
```
````
#### 示范
```html
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
```
```css
.box {
width: 600px;
height: 400px;
margin: 100px auto;
background-image: linear-gradient(black 33.3%, red 33.3%, red 66.6%, yellow 66.6%, yellow);
}
```
```js
// 定义一个30个整数的数组，按顺序分别赋予从2开始的偶数；然后按顺序每五个数求出一个平均值，放在另一个数组中并输出。试编程
let arr = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60]
let newarr = [];
for (let i = 0, count = 0, sum = 0, len = arr.length; i < len; i++) {
sum += arr.shift();
count++;
if (count % 5 === 0) {
newarr.push(sum / 5);
sum = 0;
}
}
console.log(newarr);
let arr = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60]
let newarr = [];
for (let i = 0, len = arr.length; i < len / 5; i++) {
let subarr = arr.splice(0, 5)
for (let j = 0, sum = 0; j < subarr.length; j++) {
sum += subarr[j];
}
newarr.push(sum / 5);
}
console.log(newarr);
```
```python
#!/usr/bin/python
# -*- coding: UTF-8 -*-
i = 2
while(i < 100):
j = 2
while(j <= (i/j)):
if not(i%j): break
j = j + 1
if (j > i/j) : print i, " 是素数"
i = i + 1
print "Good bye!"
```
```txt
这是一段
突出显示的
文本内容
```
- ** + **空格 ** +**`[ ]`** +**空格 ** + 任务列表内容 ( 中括号`[ ]` 里面必须有个空格)
- 给待办任务列表打 **`√`** ，变成 **已办**
1. 在渲染界面，直接鼠标左键点击框框
2. 在源代码界面，在中括号内输入 **英文字母x**
- 部分编辑器，在 中括号内 输入**任意字符**都可以打 **`√`** ( 例如 **Obsidian** )
- **补充：**
- 大部分 MD编辑器 支持输入第一个任务列表后，按下 **Enter ** 进入下一行会 **自动补全待办格式**
- 在**Obsidian**中，连续输入**两次** `Ctrl + Enter` ，即可生成一个待办列表
- 再输入一次 `Ctrl + Enter` ，会在待办列表 打 **`√`**
- **格式：**
```md
- [ ] 待办任务列表1
- [ ] 待办任务列表2
- [x] 已办任务列表1
- [x] 已办任务列表2
```
### 示范
- [ ] 待办任务列表1
- [ ] 待办任务列表2
- [x] 已办任务列表1
- [x] 已办任务列表2
Ctrl ** + **Enter ** ，快速生成任务列表
1. **`-`** + **空格 ** + **Ctrl ** + **Enter ** +待办文本内容
2. 待办文本内容 + **Ctrl ** + **Enter ** **×2** ( 输入文本后，连续2次 `Ctrl + enter` )
(只有切换至 编辑模式 才能看到喔)
%%这是一行Obsidian里的注释%%
%%
这里是
一段
假装有
很多行的
Obsidian里的
注释
%%
: ** + **空格 ** + 链接地址 （这个**空格 ** 不打也没事)
```md
[百度一下，你就知道][度娘]
[知乎-有问题，就会有答案][知乎]
[度娘]: http://www.baidu.com
[知乎]: https://www.zhihu.com
```
#### 示范
[百度一下，你就知道][度娘]
[知乎-有问题，就会有答案][知乎]
: ** + **空格 ** + 脚注内容 （这个 **空格 ** 不打也没事)
```md
鲁迅原名是什么[^1] ，浙江哪里人[^2]
[^1]: 周树人
[^2]: 绍兴人
```
#### 示范
鲁迅原名是什么[^1]，浙江哪里人[^2]
键盘文本 `**
- **`Ctrl + X `**
- **效果：**
- **键盘文本 **
- **Ctrl ** + **X ** ( 剪切 )
- **说明：**
- 键盘文本也不一定非得是键盘按键，也可以作为**着重文本**突出显示
- **效果：** 这也算一种着重文本的方式
#### 11.1.1 加粗键盘文本
- **加粗**键盘文本的格式有**两种**：
- `**键盘文本** `
- `**ctrl + x **`
- **效果：**
1. **键盘文本**
2. **ctrl + x **
这是一段放大文本 `
- **效果：**
- 这是一段普通文本
这是一段放大文本
#### 11.2.1 放大粗体文本
- 放大**加粗**文本的格式有**两种**：
1. `**这是一段放大粗体文本 **`
2. `**这是一段放大粗体文本** `
- **效果：**
1. **这是一段放大粗体文本 **
2. **这是一段放大粗体文本**
这是一段缩小文本 `**
- **效果：**
- 这是一段普通文本
这是一段缩小文本
#### 11.3.1 缩小斜体文本
- **斜体**缩小文本 的格式有**两种**：
1. `*这是一段缩小斜体文本* `
2. `*这是一段缩小斜体文本 *`
- **效果：**
1. *这是一段缩小斜体文本*
2. *这是一段缩小斜体文本 *
这是一段橘色文本 `**
- **效果：**
- 这是一段橘色文本
- color 里的颜色支持 英文单词，**[16进制](http://c.runoob.com/front-end/55 "可跳转至菜鸟教程了解")，[rgb](https://www.runoob.com/cssref/func-rgb-css.html "可跳转至菜鸟教程了解")，[rgba](https://www.runoob.com/cssref/func-rgba.html "可跳转至菜鸟教程了解")**
这是一段加粗的水鸭色文本 **`
- **效果：** **这是一段加粗的水鸭色文本 **
2. **格式2：** `**这是一段加粗的水鸭色文本** `
- **效果：** **这是一段加粗的水鸭色文本**
- 若上述混搭方法的样式**失效** ，可以使用 纯HTML标记
- **格式：** `这是一段加粗的水鸭色文本 ` (标记略复杂，不是很推荐)
- **效果：** 这是一段加粗的水鸭色文本
This is an italic teal text *`
- **效果：** *This is an italic teal text *
2. **格式2：** `*This is an italic teal text* `
- **效果：** *This is an italic teal text*
This is a bold italic teal text ***`
- **效果：** ***This is a bold italic teal text ***
2. **格式2：** `***This is a bold italic teal text*** `
- **效果：** ***This is a bold italic teal text***
^ ** 包裹 (**Shift + 6 **)
- **格式：** **`x^2^`**
- **效果：** x^2^
- **Obsidian** 没效果的，可以用后面会讲的 **Latex**
- 或者，也可以使用 **HTML标记**
- `这里是上标内容 `
- `X2 `
- **效果：**
- **X2 **
~ ** 包裹 (**Shift + ` **)
- **格式：** **`H~2~O`**
- **效果：** H~2~O
- **Obsidian** 没效果的，可以用后面会讲的 **Latex**
- 或者，也可以使用 **HTML标记**
- `这里是下标内容 `
- `H2 O`
- **效果：**
- **H2 O**
: 包裹，里面是 **Emoji** 符号的 **语义化文本** ( **Typora编辑器** 中，输入 `:` 就会带提示器 )
- **示例：**
- `:smile:`
`:sweat:`
`:cat:`
`:woman_cartwheeling:`
- **效果：**
- :smile:
:sweat:
:cat:
:woman_cartwheeling:
win + . ** 就可以输入 Emoji 了
- **Obsidian** 用户可以安装**第三方插件**来支持 **Emoji** 的输入，推荐两个
1. ==Emoji Shortcodes==
2. ==Emoji Toolbar==
\\ ** ( 反斜线要紧贴在标识符前面，**不能** 有 **空格 ** )
- **原理：**
- **`\`** 的作用是让标识符 **转义** 变为一个**普通字符**，完成这个效果后，反斜线会**自动隐藏**
- 隐藏后的反斜线仅在**源代码**界面**可见**，在**渲染**界面**不可见**
- 反斜线只**争对标识符**起作用，其他字符添加 **`\`**，**`\`** 不会自动隐藏
- **补充：**
- 如果想给已经被加在标识符前面，会自动隐藏的 **`\`** 显示出来，可以在反斜线前面再加一个 **\\ ** ，用它**自己来转义自己**
- **示例：** **`这里紧跟在标识符前面的反斜线\\*会被转义成普通字符显示出来，不会自动隐藏，且这段文件会是斜体*`**
- **效果： ** 这里紧跟在标识符前面的 反斜线\\*会被转义成普通字符显示出来，不会自动隐藏，且这段文件会是斜体*
| ** 作为单元格的内容，但**不会**被识别为**表格的结构**，不会增加额外的单元格
```md
|表头1|表头2|
|-|-|
|这里的文本被\|分隔|这里的文本也被\|分隔|
```
- **效果：**
| 表头1 | 表头2 |
|:------------------:|:--------------------:|
| 这里的文本被\|分隔 | 这里的文本也被\|分隔 |
\\ **
- **格式：** **`[链接里的 \[中括号\] 能被正常显示](https://www.runoob.com)`**
- **效果：** [链接里的 \[中括号\] 能被正常显示](https://www.runoob.com)
- ** 是标识符，会变成一个无序列表
**如下所示：**
>The Web, the Tree, and the String.
>写作之难，在于把网状的思考，用树状结构，体现在线性展开的语句里。
>- 史蒂芬·平克
- **解决方法：**
- 在 **- ** 前面加上 转义符号 **\\ **
```md
>The Web, the Tree, and the String.
>写作之难，在于把网状的思考，用树状结构，体现在线性展开的语句里。
>\- 史蒂芬·平克
```
- **效果：**
>The Web, the Tree, and the String.
>写作之难，在于把网状的思考，用树状结构，体现在线性展开的语句里。
>\- 史蒂芬·平克
空格 空格 Enter
这是换行后的文本
Bcakspace ** ( 退格键 )
! ** 使它可见
```
- **说明：**
- width ( 宽度 ) height ( 高度 ) ，可以自己设置，直接输入数字即可，单位默认是 px(像素)
也可以使用 **百分比**
**`width=100%`** 代表水平撑满整个窗口
**`height=50%`** 代表垂直撑满半个窗口
- **Video标签** 支持的视频格式 ：MP4 ogg webm
$ ** + 行内公式 + **$ **
源码1： **
````shell
```{mermaid}
graph TB
%% s=start e=end f=fork n=normal
s([开始])-->f1{{if条件}};
%% 分支点2
f1--true-->n1[if语句块]-->e([结束]);
f1--false-->f2{{else if条件}};
%% 分支点1
f2--true-->n2[else if语句块]-->e;
f2--false-->n3[else语句块]-->e;
```
````
**渲染1： **
为了在sphinx中使用MyST-parser进行渲染，在Markdown文件中要写成\`\`\`{mermaid}\`\`\`，而不是\`\`\`mermaid\`\`\`（即要加上一对花括号使得MyST-parser能够识别）。但这样的问题是在Markdown编辑器（比如Typora，Obsidian等）里不能正常渲染，只有通过MyST-parser在sphinx中生成网页之后才能渲染。
下面的mermaid的code block在编辑器里面**不能**实时渲染，但在生成的html文件里渲染是正常的。
```{mermaid}
graph TB
%% s=start e=end f=fork n=normal
s([开始])-->f1{{if条件}};
%% 分支点2
f1--true-->n1[if语句块]-->e([结束]);
f1--false-->f2{{else if条件}};
%% 分支点1
f2--true-->n2[else if语句块]-->e;
f2--false-->n3[else语句块]-->e;
```
下面的mermaid的code block在编辑器里面**可以**实时渲染，但在生成的html文件里不能正常渲染。
```mermaid
graph TB
%% s=start e=end f=fork n=normal
s([开始])-->f1{{if条件}};
%% 分支点1
f1--true-->n1[if语句块]-->e([结束]);
f1--false-->f2{{else if条件}};
%% 分支点2
f2--true-->n2[else if语句块]-->e;
f2--false-->n3[else语句块]-->e;
```
源码2： **
````shell
```{mermaid}
graph LR
%% s=start e=end f= fork n=normal
%% 虚线
s[朱百六]-.->|子|n1[朱四九]-.->|子|n2[朱五四]-.->|子|f1_帝((朱八八))
%% 分支点 朱八八
f1_帝-->|长子|f2[朱标]
f1_帝-->|次子|n3[朱樉]
f1_帝-->|三子|n4[朱棢]
f1_帝-->|四子|n5_帝((朱棣))
%% 分支点 朱标
f2-->|长子|e1[朱雄英]
f2-->|次子|e2_帝((朱允炆))
n5_帝-->|长子|e3[朱高炽]
```
````
**渲染2： **
```mermaid
graph LR
%% s=start e=end f= fork n=normal
%% 虚线
s[朱百六]-.->|子|n1[朱四九]-.->|子|n2[朱五四]-.->|子|f1_帝((朱八八))
%% 分支点 朱八八
f1_帝-->|长子|f2[朱标]
f1_帝-->|次子|n3[朱樉]
f1_帝-->|三子|n4[朱棢]
f1_帝-->|四子|n5_帝((朱棣))
%% 分支点 朱标
f2-->|长子|e1[朱雄英]
f2-->|次子|e2_帝((朱允炆))
n5_帝-->|长子|e3[朱高炽]
```
源码： **
````md
```mermaid
pie
title 为什么总是宅在家里？
"喜欢宅" : 45
"天气太热" : 70
"穷" : 500
"关你屁事" : 95
```
````
**渲染： **
```mermaid
pie
title 为什么总是宅在家里？
"喜欢宅" : 45
"天气太热" : 70
"穷" : 500
"关你屁事" : 95
```
源码： **
````shell
```{mermaid}
sequenceDiagram
%% 自动编号
autonumber
%% 定义参与者并取别名，aliases：别名
participant A as Aly
participant B as Bob
participant C as CofCai
%% 便签说明
Note left of A: 只复习了一部分
Note right of B: 没复习
Note over A,B: are contacting
A->>B: 明天是要考试吗？
B-->>A: 好像是的！
%% 显示并行发生的动作，parallel：平行
%% par [action1]
rect rgb(0, 25, 155)
par askA
C -->> A:你复习好了吗？
and askB
C -->> B:你复习好了吗？
and self
C ->>C:我还没准备复习......
end
end
%% 背景高亮，提供一个有颜色的背景矩形
rect rgb(25, 55, 0)
loop 自问/Every min
%% 渲染： **
```mermaid
sequenceDiagram
%% 自动编号
autonumber
%% 定义参与者并取别名，aliases：别名
participant A as Aly
participant B as Bob
participant C as CofCai
%% 便签说明
Note left of A: 只复习了一部分
Note right of B: 没复习
Note over A,B: are contacting
A->>B: 明天是要考试吗？
B-->>A: 好像是的！
%% 显示并行发生的动作，parallel：平行
%% par [action1]
rect rgb(0, 25, 155)
par askA
C -->> A:你复习好了吗？
and askB
C -->> B:你复习好了吗？
and self
C ->>C:我还没准备复习......
end
end
%% 背景高亮，提供一个有颜色的背景矩形
rect rgb(25, 55, 0)
loop 自问/Every min
%% 源码： **
````shell
```{mermaid}
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
```
````
**渲染： **
```mermaid
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
```
### 17.5 类图
源码： **
````shell
```{mermaid}
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
```
````
**渲染： **
```mermaid
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
```
**\#** 的**前面** 需要有个空格
- **空格** + **\#** + 标签名