Markdown是很好用的轻量级标记语言，许多开发人员喜欢使用Markdown来记录学习心得和写博客。本篇博客主要介绍Markdown的高级技巧教程，Markdown的基础教程已经在上篇介绍过了。☛ 传送门
目录：
1、Markdown目录
在使用Markdown写文档时，有时需要给文档生成目录，此时有两种方式可以实现，一个是通过a标签的锚点实现，另一个是通过TOC扩展实现
通过锚点实现的请参照上篇Markdown的基础教程中Markdown链接的内容☛ 传送门 ，此处主要介绍top扩展方式实现。
自动生成目录的方式需要对Markdown进行toc扩展，目前主流的编辑器和博客编写都能实现该功能，使用方法很简单，具体用法如下：
[toc]
tip: [top]必须在要生成目录的地方单独一行写
2、Markdown内嵌HTML功能
Markdown是可以内嵌Html语言的，对于 Markdown 中未包含的标签, 可以直接使用 HTML，没有必要使用定界符或标识符来表明从 Markdown 切换到 HTML; 直接使用标签就行了。
唯一的限制就是对于 HTML 块级元素 -- 像<div>, <table>, <pre>, <p>, 等等, 必须另起一行单独放 , 并且开始和结束标签前面不能有任何缩进. Markdown 会自动识别这些块级元素而不会在他们周围添加额外的<p>标签。
例如, 下面是添加 HTML 表格到 Markdown 文件:
非块级元素：<font color=green>**加粗**</font>
<table>
<tr>
<td>**表格**</td>
</tr>
</table>
展示效果： 非块级元素：加粗
| **加粗** |
注意: Markdown 语法结构在 HTML 块级元素中不会被处理. 例如, 你不该在 HTML 块级元素中使用 Markdown 式的语法如**加粗**。此外，在部分markdown编辑器中，html中还可以加style来通过css控制样式例如博客园的markdown编辑器和Typora支持，CSDN的markdown编辑器目前好像还不支持。
你甚至可以使用 HTML 标签替代 Markdown 格式; 例如你可以用 HTML <a>和 <img>标签替代 Markdown 的链接和图片语法。以下为部分例子：
斜体标签：<i></i> <i>i标签斜体</i> <em>em标签斜体</em>
粗体标签：<b></b> <b>粗体</b>
不换行空格标签： 空 格
换行标签：</br>
分割线标签：<hr>
删除线标签：<s></s>
上标标签:<sup></sup> n<sup>2</sup> + 2n + 1 = 0
下标标签:<sub></sub> H<sub>2</sub>O
高亮标签:<mark></mark> <mark style="background:green;">高亮 styl</mark>
键盘文本标签：<kbd></kbd> 使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑
表格标签：
<table>
<tr><th>Title1</th><th>Title2</th><th>Title3</th>
</tr>
<tr>
<td>a</td><td>b</td><td>c</td>
</tr>
<tr>
<td>d</td><td>e</td><td>f</td>
</tr>
</table>
展示效果： 斜体标签： i标签斜体 em标签斜体
粗体标签： 粗体 不换行空格标签： 空 格
换行标签：
分割线标签：
删除线标签：
| Title1 | Title2 | Title3 |
|---|---|---|
| a | b | c |
| d | e | f |
具体详细请见:Markdown内联 HTML官方文档
3、Markdown转义
Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdown 使用反斜杠转义特殊字符：
**文本加粗**
\*\* 正常显示星号 \*\*
展示效果： 文本加粗 ** 正常显示星号 **
Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：
\ 反斜线
` 反引号
* 星号
_ 下划线
{} 花括号
[] 方括号
() 小括号
# 井字号
+ 加号
- 减号
. 英文句点
! 感叹号
4、Markdown公式
当你需要在编辑器中插入数学公式时，可以使用两个美元符 $ 包裹 TeX 或 LaTeX 格式的数学公式来实现。提交后，问答和文章页会根据需要加载 Mathjax 对数学公式进行渲染。如：
$$
\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
$$
展示效果：
5、Markdown图
markdown可以画流程图、时序图和甘特图
Markdown流程图 流程图
```mermaid
graph LR
A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]
```(横向流程图)
***
```mermaid
graph TD
A[方形] --> B(圆角)
B --> C{条件a}
C --> |a=1| D[结果1]
C --> |a=2| E[结果2]
```(竖向流程图)
tip：复制代码时 ` 后面不能加其他字符
| 符号 | 属性 | 说明 |
|---|---|---|
| graph | LR / RL or TD | LR:从左到右；RL:从右到左; TD：从上到下 |
| --> | 箭头 | |
| name[text] | 方形框 | name:标记该项；text：文本内容 |
| name(text) | 圆角框 | name:标记该项；text：文本内容 |
| name | 棱形框 | name:标记该项；text：文本内容 |
| | text| | 插入内容 | text：超乳到箭头上的内容 |
展示效果：
(横向流程图)
(竖向流程图)
标准流程图（默认竖向）
| ```flow st=>start: 开始框 op=>operation: 处理框 cond=>condition: 判断框(是或否?) sub1=>subroutine: 子流程 io=>inputoutput: 输入输出框 e=>end: 结束框 st->op->cond cond(yes)->io->e cond(no)->sub1(right)->op ``` |
说明： 先定义各个框变量,语法为： name=>框类型：内容
框类型有: start(开始框)； operation: 处理框； condition:判断框； subroutine: 子流程框； inputoutput: 输入输出框； end: 结束框 再用‘->'链接各个类型的框形成流程图
tip:链接时必须完整，否则不会显示
展示效果（此方法在博客园无法正常显示）：
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
(标准流程图:竖向)
标准流程图（横向）
| ```flow st=>start: 开始框 op=>operation: 处理框 cond=>condition: 判断框(是或否?) sub1=>subroutine: 子流程 io=>inputoutput: 输入输出框 e=>end: 结束框 st(right)->op(right)->cond cond(yes)->io(bottom)->e cond(no)->sub1(right)->op ``` |
展示效果（此方法在博客园无法正常显示）：
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
(标准流程图：横向)
Markdown UML时序图
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/>看医生...
李四-->>张三: 很好!
王五->李四: 你怎么样?
李四-->王五: 很好!
```(UML标准时序图)
展示效果：
Markdown 甘特图
```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
```(甘特图)
展示效果：
说明：由于markdown编辑器对markdown的拓展程度不同，可能在不同的编辑器/博客中显示的样式会有所差别甚至无法正常显示。
本博客与CSDN博客༺ཌ༈Asio君༈ད༻同步发布