markdown语法总结记录一下常用的markdown语法和一些不常用的配置，容易忘记的流程图。方便以后使用时，查找学习

十年生死两茫茫，不思量，自难忘。千里孤坟，无处话凄凉。纵使相逢应不识，尘满面，鬓如霜。夜来幽梦忽还乡，小轩窗，正梳妆。相顾无言，惟有泪千行。料得年年肠断处，明月夜，短松冈。

——《江城子·乙卯正月二十日夜记梦》苏轼

记录一下常用的markdown语法

印象笔记左上角文件 -> 新建markdown笔记，

本地写markdown的软件typora

typora 配置

生成文章目录

[toc]

[toc]

标题

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

字体

这里我常用**xxx**加粗

*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___

字体颜色

$\color{red}{字体颜色}$ 最好用标签以为这个会改变字体

$\color{颜色值可以是英文也可以是16进制编码值}{内容}$

直接使用标签

<font style='color: red;'></font>

分割线

用的不多

***
---

删除线

~~删除线~~

~~删除线~~

脚注

很少见，很好用¹

[^要注明的文字]
[^要注明的文字]: 注明文字展示的内容

列表

无序列表

我习惯用*

* 第一列
* 第二列

+ 第一列
+ 第二列

- 第一列
- 第二列

有序列表

第一列
第二列

1. 第一列
2. 第二列

有序加无序

第一列
- 第一列第一项
第二列
- 第二列第一项

1. 第一列
	* 第一列第一项
2. 第二列
	* 第二列第一项

任务列表

未完成任务
已完成任务

- [ ] 未完成任务
- [x] 已完成任务
注意先写中括号和后空格然后在写前面的中划线和空格，否则会跟无需列表冲突

区块

这是一个区块

还可以嵌套

> 这是一个区块
>
> > 还可以嵌套

链接

常用[文本](外部链接 | 内部锚点)

[跳转标题](# 标题)

链接百度

Google

www.baidu.com

// 常用
[]()
// 不常用
[][]
[]: 地址
<链接地址>

图片

[看着里](# typora 配置)

![alt](图片地址)

表格

用的时候|日期|地址|xxx|回车，就能生成表格。

表头	表头
单元格	单元格

|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |

代码

markdown最香的地方就是可以放代码，这是doc文档不能比的

标示代码块

就是这样

``

代码区块

选择不同的语言就会高亮里面的代码

```js
```

使用标签

想实现其他样式或者效果可以直接用标签和css实现，这才是前端该有的文档

我想标注一个粉色背景

标示下划线

H₂O CO2

爆米^TM 爆炸^💥^

s==高亮了==

<font style='background: pink;'>我想标注一个粉色背景</font>
<u>标示下划线</u>
下标：H<sub>2</sub>O  CO~2~
上标：爆米<sup>TM</sup> 爆炸^💥^
高亮：==高亮了==
<video src=" " /> 插入视频
<audio src="xxx.mp3" /> 插入音频

画图

我是每次都记不住，都需要查一下，因为使用频率不高，以后不用百度了，看这个文章就够了

流程图

```mermaid // 这个是类型
graph LR // 方向由左向右 TD 是由上到下
A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[横向流程图] // 没有 --> 就是游离状态
    设置样式  A 填充色， 填充透明度         描边色       描边宽度
 		style A fill:#2ff,fill-opacity: 0.1,stroke:#faa,stroke-width: 4px
```

graph LR
A[方形] --> B(圆角)
B --> C{条件a}
C --> |a=1|D[结果1]
C --> |a=2|E[结果2]
style A fill:#2ff,fill-opacity: 0.1,stroke:#faa,stroke-width: 4px
F[横向流程图]

语法结构

```mermaid
	graph 方向
	节点以及节点连线（定义和连线步骤可以分开）
	（样式调整）
```

显示方向

TB/TD（ top bottom/top down）表示从上到下 BT（bottom top）表示从下到上 RL（right left）表示从右到左 LR（left right）表示从左到右

节点类型

节点本身的展现形式，是通过不同括号来代表各自不同的形状，默认为矩形。

默认节点： A 矩形节点： B[矩形] 圆角矩形节点： C(圆角矩形) 圆形节点： D((圆形)) 非对称节点： E>非对称] 菱形节点： F{菱形}

graph TB
A
B[B矩形]
C(C圆角矩形)
D((D圆形))
E>E非对称]
F{F菱形}

节点连线

线条本身的形式有多种，通过常规的英文格式的格式来标识，具体如下：

箭头连接 A1- ->B1 开放连接 A2- - -B2 虚线箭头连接 A3.->B3 或者 A3-.->B3 虚线连接 A4.-B4 或者 A4-.-B4 粗线箭头连接 A5 ==> B5 粗线开放连接 A6===B6 标签虚线箭头连接 A7-.text.->B7 标签开放连接 A8- -text- - -B8

graph TB
A1 --> B1
A2 --- B2
A3 .-> B3
A4 .- B4
A5 ==> B5
A6 === B6
A7-.text.-> B7
A8 -- text --- B8

标准流程图

```flow // 类型
// 先确定流程图有什么
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框（是或否？）
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
// 使用前面的变量进行链接,每一项后面都可加括号如果里面是right是向右排列即横向，不写默认竖向
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
或
st(right)->op(right)->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
```

st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框

st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op

元素的语法

tag=>type: content|status :>url

tag就是元素名字，
type是这个元素的类型，
content是框中显示的内容，注意type后的冒号与文本之间一定要有个空格
status是标记状态，可以没有
url是一个连接，与框框中的文本相绑定

元素类型

start # 开始
end # 结束
operation # 操作
subroutine # 子程序
condition # 条件
inputoutput # 输入或产出

UML时序图

描述前后端交互很好用

```sequence
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗？
```

对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗？

UML时序图复杂样例

```sequence
Title: 标题：复杂使用
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩
```

Title: 标题：复杂使用
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩

UML标准时序图样例

```mermaid
%% 时序图例子,-> 直线，-->虚线，->>实线箭头
  sequenceDiagram
    participant 张三
    participant 李四
    张三->王五: 王五你好吗？
    loop 健康检查
        王五->王五: 与疾病战斗
    end
    Note right of 王五: 合理 食物 <br/>看医生...
    李四-->>张三: 很好!
    王五->李四: 你怎么样?
    李四-->王五: 很好!
```

%% 时序图例子,-> 直线，-->虚线，->>实线箭头
  sequenceDiagram
    participant 张三
    participant 李四
    张三->王五: 王五你好吗？
    loop 健康检查
        王五->王五: 与疾病战斗
    end
    Note right of 王五: 合理 食物 <br/>看医生...
    李四-->>张三: 很好!
    王五->李四: 你怎么样?
    李四-->王五: 很好!

甘特图样例

```mermaid
%% 语法示例
        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2014-01-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h
```

%% 语法示例
        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2014-01-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h

参考文献

Markdown 教程

好用：使用起来方便，书写简单 ↩

markdown语法总结