Markdown进阶教程

  Markdown是很好用的轻量级标记语言，许多开发人员喜欢使用Markdown来记录学习心得和写博客。本篇博客主要介绍Markdown的高级技巧教程，Markdown的基础教程已经在上篇介绍过了。☛ 传送门

---

目录：

1、Markdown目录

2、Markdown内嵌HTML功能

3、Markdown转义

4、Markdown公式

5、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>
不换行空格标签：&nbsp;       空&nbsp;格
换行标签：</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标签斜体

粗体标签： 粗体

不换行空格标签：  空 格

换行标签：


分割线标签：

---

删除线标签： 删除线

上标标签: n² + 2n + 1 = 0

下标标签: H₂O

高亮

键盘文本标签： 使用 Ctrl+Alt+Del 重启电脑

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}
$$

展示效果：

\[\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{text}	棱形框	name:标记该项；text：文本内容
| text|	插入内容	text：超乳到箭头上的内容

展示效果：

graph LR
A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]

(横向流程图)

---

graph TD
A[方形] --> B(圆角)
B --> C{条件a}
C --> |a=1| D[结果1]
C --> |a=2| E[结果2]

(竖向流程图)

---

标准流程图（默认竖向）

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

说明：
想要控制箭头横向指向左或右只需要在'->'后加上'(left)'或'(right)'

展示效果（此方法在博客园无法正常显示）：

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标准时序图)

展示效果：

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

---

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
​```(甘特图)

展示效果：

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博客༺ཌ༈君☠纤༈ད༻同步发布