Markdown使用手册

曲岳 QuYue

---

0 Markdown

0.1 Markdown定义

  Markdown 是一种简单的标记语言，它可以被编译成 Html 页面，或者也可以单独以纯文本的形式呈现。Markdown 的目标是实现“易读易写”，对于 Markdown 文档来说，可读性是最重要的。

Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯（英语：John Gruber）。它允许人们“使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档”。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。

  Markdown语法的目标是：成为一种适用于网络的书写语言。 所以其设计初衷不是想取代HTML的地位，而是想简化它，简化到甚至可以用来快速记笔记的程度。因此Markdown本身也是兼容HTML的，在比较复杂的情况时，Markdown原生语言可能完成不了，那么就需要使用HTML来完成复杂的功能。

0.2 Markdown编辑器

  目前来说有许多种Markdown编辑器，在网上也有大量的教程，比如这份教程。我本人也用过不少，我觉得Markdown编辑器各有各的优缺点，下面列出我使用的各种Markdown的编辑器。注：本文使用的是Atom编辑器，一切都以Atom准，如果有不同的地方还需要做出相应的代码更改。注：为了能够顺便撸一撸代码，我用过的编辑器都偏向于通过插件的形式支持Markdown。

1. Atom(推荐程度)★★★★★☆
     最好用的编辑器之一，源自Github，支持和Github的互动，同时拥有大量好的编辑Markdown的插件。我最喜欢的是MPE——Markdown Preview Enhanced这个插件，功能强大到爆表，谁用谁知道。（只不过其只支持Atom和VS Code）。
2. 有道云笔记★★★★☆
     很好用，我用的时间最长。有道云笔记可以说是良心产品了，从有道云笔记早期开始支持Markdown的时候开始我就在使用，早期确实Markdown功能很不完善，感觉是个很鸡肋的功能，我也因此多次向其客服反映过许多Bug，但是后来慢慢的就完善了，现在已经很成熟了。我相信随着时间的推移，会越来越好。
3. VS Code★★★☆☆
     虽然网上许多人说VS Code对Markdown的支持很好，而且其官方也对外宣称支持的好。但是我实际用过后表示很失望，我发现许多好用的功能还是得使用MPE，可是MPE对其支持的程度并不高。最不能忍的是竟然不能预览和编辑页面同步滑动（只能用光标来控制同步滑动，所以同步滑动的时候需要用键盘一点点向下摁，这样很累手的啊喂 ！）不过整体还可以，希望可以改进。
4. Notepad插件★★☆☆☆
     Notepad不愧是Windows上功能最为强大的编辑器之一，各种插件的支持可以让其如虎添翼，我用过三种方法来在Notepad++上编辑Markdown，不过效果都不是那么好，但是也不要吹毛求疵了，毕竟它不是用来干这个的（和上面某个宣称很好的编辑器不同），但平时的时候也可以用来简单的编辑一下的。

1 文字

  当然我们进行记录的时候免不了进行文字的输入，下面就介绍一下Markdown中文字的输入。

1.1 文字输入

• 中文输入：我们直接输入中文就可以了，一般都是支持的。
• English input: We can input English directly.
• 转义字符的输入：有很多特殊字符在markdown中有特殊的含义，比如*<>`\等,这个时候我们就需要进行转义，Markdown中的转义字符为\，但是也有特殊。（具体转义字符请看1.2节）
• 其他文字输入：非转义字符就都可以正常输入，例如1@！#、等等都可以。

1.2 转义字符

  Markdown中的转义字符为\，具体转义字符请见下表：

显示结果	描述	转义
	全角空格（中文）	 （或切换至全角模式时输入空格）
	半角空格（英文）	 
	不断行空格	 
<	小于号	\<或&lt;
>	大于号	\>或&gt;
&	与号	\&或&amp;
\	反斜杠	\\
`	反引号	\`
*	星号	\*
_	下划线	\_
{ }	大括号	\{ \}
#	井号	\#
+ -	加减号	\+ \-
.	英文句号	\.
!	叹号	\!

注：有的时候，我们不需要使用\\来进行转义也可以，具体看情况，但是使用转义字符\\肯定是最好的。

2 基本语法

  Markdown自产生以来有多种变种，其目的不外乎满足特定的需要。由于其本身追求的就是易写、易读，所以一般这些变种都不会太复杂，只不过是需要在使用不同的编译器的时候学习一下扩展后的语法罢了。
  本章要介绍的则是通用的基本语法。

2.1 标题

  首先介绍标题的输入。通常以#开头，共六级，一级就以一个#开头，二级就以两个#开头（写成##），其余依此类推。具体如下：

# 1级标题
## 2级标题
### 3级标题
#### 4级标题
##### 5级标题
###### 6级标题

结果如下：

1级标题 {ignore=true}

2级标题 {ignore=true}

3级标题 {ignore=true}

4级标题 {ignore=true}

5级标题 {ignore=true}

6级标题 {ignore=true}

2.2 水平线

  有的时候我们需要使用水平线来分割一下Markdown文件，使得显示后更有层次感，在有些编译器中还可以通过水平线来进行ppt页面的划分。这里介绍以下几种方法：

1. 通用方法，使用连续三个（及以上）减号-，即---，显示如下：

   ---

2. 有一些编译器还支持使用连续三个（及以上）星号*，显示如下：

   ---

3. 有一些编译器还支持使用连续三个（及以上）下划线_，显示如下：

   ---

4. 使用html的方法，同时还可以调整线的粗细本编译器可能看不出粗细的区别

   <hr class="hr1"/>
   <hr class="hr2"/>
   <hr class="hr3"/>
   <hr class="hr4"/>
   <hr class="hr5"/>

   显示如下：

   ---

   ---

   ---

   ---

   ---

2.3 加粗倾斜

  有的时候我们需要对文字进行一定的强调，如加粗和倾斜，在Markdown中实现起来十分简单。

2.3.1 加粗

  加粗是一个强调文字的好的方式，以下是几种加粗文字的方法：

1. **加粗的文字**，显示为加粗的文字。最为推荐的方法
2. __加粗的文字__，显示为 加粗的文字。需要和正文之间有一个空格
3. <strong>加粗的文字</strong>，显示为加粗的文字。html方法
4. <b>加粗的文字</b>，显示为加粗的文字。html方法，其实更确切的来说更像是黑体

2.3.2 斜体

  倾斜也是一种强调文字的方式，而且在英文中书的名字是主要斜体的。以下是几种倾斜文字的方法：

1. *倾斜的文字*，显示为倾斜的文字。最为推荐的方法
2. _倾斜的文字_，显示为 倾斜的文字。需要和正文之间有一个空格
3. <i>倾斜的文字</i>，显示为倾斜的文字。html方法

2.4 块引用

  有的时候我们需要对文本进行引用或注释，这个时候就需要使用块引用。

1. 最常用的块引用是使用>放在一行的开头来进行实现。具体如下：

   >块引用1
   >块引用2

   显示为:

   块引用1
   块引用2

   如果引用一本书的话我们可以这样使用：

   > “话说天下大势，分久必合，合久必分”
   > <p align="right">————《三国演义》</p>

   “话说天下大势，分久必合，合久必分”

   ————《三国演义》

2. 我们也可以使用html的方法。具体如下：

   <blockquote>
   块引用1
   
   块引用2
   </blockquote>

   显示为:

   块引用1

   块引用2

3. 块引用最赞的一点是可以使用多层嵌套，这样会让整体看起来更有条理和层次感。嵌套的时候只需要多加一个>即可进入下层，退出该层的时候需要加一个空白行，具体如下：

   >第一层
   >>第二层
   >>>第三层
   >>>>第四层
   >>>
   >>>回到第三层
   >>
   >>回到第二层
   >
   >回到第一层
   >>>突然转到第三层
   >
   >突然回到第一层

   显示为：

   第一层

   第二层

   第三层

   第四层

   回到第三层

   回到第二层

   回到第一层

   突然转到第三层

   突然回到第一层

2.5 列表

  列表是最为常用的功能之一，可以让文章更加有逻辑性，在Markdown中列表的实现也是十分的简单，共有两种列表：无序列表和有序列表。

2.5.1 无序列表

  首先介绍一下无序列表，无序列表通常可以用来用在具有并列关系的列表项上。下面是几种具体的方法：注：这几种方法并不能混用

1. 方法一：最为推荐

   - 无序列表
   - 无序列表
   - 无序列表

   显示为；

   • 无序列表
   • 无序列表
   • 无序列表

2. 方法二：因为+号比起-号更难打一些，所以不是很推荐

   + 无序列表
   + 无序列表
   + 无序列表

   显示为；

   • 无序列表
   • 无序列表
   • 无序列表

3. 方法三：因为*号会在某些编译器中和加粗倾斜中的*号效果冲突，所以尽量不要使用

   * 无序列表
   * 无序列表
   * 无序列表

   显示为；

   • 无序列表
   • 无序列表
   • 无序列表

  如果在每个列表项的下面有好多行，为了让结构更清晰，我们可以用tab键让其缩进，例如下面的代码：注：此方法适用于无序和有序列表

* 第一行
    第二行
    第三行
* 第二行

• 第一行
  第二行
  第三行
• 第二行

2.5.2 有序列表

  然后介绍一下有序列表，有序列表由数字开头，后跟. 即可。下面是具体的方法：注：即使你开头的数字不是按顺序的，编译后仍是1，2，3...递增

1. 有序列表
2. 有序列表
10. 有序列表(不按顺序)

显示为；

1. 有序列表
2. 有序列表
3. 有序列表(不按顺序)
   但是有的时候会意外生成有序列表，这个时候就需要转义一下，例如：

1. 有序列表
2018. 6.6 会出问题
2018\. 6.6 就不会出问题

显示为；

1. 有序列表
2. 6.6 会出问题
   2018. 6.6 就不会出问题

2.5.3 嵌套列表

  有的时候逻辑关系比较复杂的话需要列表之间的嵌套。列表的嵌套主要是使用tab键来完成的。具体如下：

1. 嵌套列表项1
    1. 嵌套列表项2  
        - 嵌套列表项3
        - 嵌套列表项4
    2. 嵌套列表项5
2. 嵌套列表项6

显示为：

1. 嵌套列表项1
   1. 嵌套列表项2
      • 嵌套列表项3
      • 嵌套列表项4
   2. 嵌套列表项5
2. 嵌套列表项6
   

2.6 链接

  链接也是一种十分常用且强大的功能，链接共可以分为几种：文字超链接、图像超链接、索引超链接。

2.6.1 文字超链接

  首先我们可以对文字进行超链接，如下：
[百度搜索](https://www.baidu.com/ "百度")，显示为：百度搜索。
  其中"百度"是用来将鼠标移动到链接上显示的提示，可以用来做提示的符号有""，''，()。当然我们不单可以链接网页，也可以链接文档，这个不太常用，就不介绍了。

2.6.2 图像超链接

  当然我们可以也可以对图片进行超链接，让Markdown图文并茂，通常的做法为![找不到图像文件时显示的文本](图像路径 "鼠标的提示")，具体例子如下：
![该图片找不到](https://www.baidu.com/img/bd_logo1.png "百度的图片")，显示为：

  当然了，我们不单可以找在网络上的图片，在显示本地的图片时候，我们也可以直接用该图片的地址。注：有的编译器甚至支持直接复制粘贴
  但是使用这种方法得到的图片不可以改变大小，不能添加标注，不能换位置，所以使用html的办法会更好一些。代码如下：

<center>
<img src="https://www.baidu.com/img/bd_logo1.png" width="25%" height="25%" />

图片1. 百度的图片
</center>

or

<center>
<img src="https://www.baidu.com/img/bd_logo1.png" width="50%" height="50%" />
<br>图片1. 百度的图片</br>
</center>

显示如下：

图片1. 百度的图片

2.6.3 索引超链接

  如果说文字超链接想是一种行内式的话，那么索引超链接就是行外的超链接，其形式和写论文的参考文献的感觉一样，在其他的地方将链接给出（比如文章的最后），具体例子如下：
注：网站后面的""，''，()，都是用来作为鼠标移动到那里显示的提示的

国内的几家搜索引擎有[百度][1]、[360搜索][2]、[必应][3]、[搜狗搜索][4]等。

[1]:https://www.baidu.com/ "百度的主页"
[2]:https://www.so.com/ "360搜索的主页"
[3]:https://cn.bing.com/ '360搜索的主页'
[4]:https://www.sogou.com/ (搜狗搜索的主页)

显示如下：
国内的几家搜索引擎有百度、360搜索、必应、搜狗搜索等。

  当然我们可以不按照1,2,3,4依次的写，甚至都不需要是数字，同时有可能我们会有重复的编号，这个时候默认选择文章中的第一个出现的该编号的网站，具体例子如下：

国内的中国购物网站有[天猫][5]、[京东][100]、[苏宁易购][苏宁]等。

[5]:https://www.tmall.com/ "天猫的主页"
[5]:https://www.baidu.com/ "百度的主页"
[100]:https://www.jd.com/ "京东的主页"
[苏宁]:https://www.suning.com/ '苏宁易购的主页

显示如下：
国内的中国购物网站有天猫、京东、苏宁易购等。

2.6.4 自动链接

  有我们希望直接把网站地址放到markdown上面，当然我们可以利用文字超链接实现，但是这样过于麻烦，写了两遍地址，我们就可以使用自动链接，具体例子如下：
<https://www.baidu.com>，显示为：https://www.baidu.com
  其实还支持把邮箱放到markdown上面,具体例子如下：
<QuYue1541@gmail.com>,显示为：QuYue1541@gmail.com，点击后会出现计算机上的电子邮箱，进入后会对其发邮件。
  甚至在某些编译器里都不需要故意链接，直接输入网站即可，例如： www.baidu.com

3 简单扩展语法

  除了Markdown的一些基础的语法之外，为了实现一些特定的功能，许多的编译器和大牛们都对Markdown的语法进行了扩展，本章列出一些简单的功能，后续的几章都是一些扩展出的复杂功能（除了第4章）。

3.1 表格

  表格一直是一种很直观的显示方式，在Markdown中，表格的编写十分简单方便，缺点是无法制作不规则的表格如果想做不规则的话还是使用html。
注：其中引号：可以控制向左对齐还是向右对齐（而同时表格的第一行也会一起变），当然也可以控制居中，而默认时第一行居中，下面的向左对齐。

|id     |name   |sex   |age|score|
|-------|-------|:----:|:--|----:|
|01     |A      |male  |10 |100  |
|02     |B      |female|10 |70   |
|对齐方式|上中下左|居中  |左 |右   |

结果如下：

id	name	sex	age	score
01	A	male	10	100
02	B	female	10	70
对齐方式	上中下左	居中	左	右

3.2 任务列表

  一个非常赞的功能就是任务列表，比较简单。

- [ ] This is an incomplete item
- [x] This is a complete item

结果如下：

• [ ] This is an incomplete item
• [x] This is a complete item

3.3 删除线和标记

• 我们也可以使用删除线。
  ~~这个文字将会被横线删除~~，显示为这个文字将会被横线删除。
• 我们也可以使用标记。
  ==设计标记==，显示为设计标记。

3.4 上下标

  我们也可以使用上下标。
上标：30^th^，显示为30^th；下标：H~2~O，显示为H₂O。

3.5 脚注

  我们也可以使用脚注，脚注就像是论文中的参考文献，比较简单，而且引用的文章会自动显示在文章的最后。

“话说天下大势，分久必合，合久必分” [^1]
“谋事在人，成事在天”[^1]
“运筹帷幄之中，决胜千里之外。” [^3]
“其实地上本没有路，走的人多了，也便成了路。” [^h]

[^1]:罗贯中.《三国演义》[J]。
[^3]:司马迁.《史记》[J]。
[^h]:鲁迅.《故乡》[J]。

“话说天下大势，分久必合，合久必分” ^[1]
“谋事在人，成事在天”^[1:1]
“运筹帷幄之中，决胜千里之外。” ^[2]
“其实地上本没有路，走的人多了，也便成了路。” ^[3]

  通过这个例子我们可以发现，不论我们的脚注里面添的是什么（数字，英文，汉字）都会自动按照在文章中出现的顺序命名为1，2，3…

3.6 锚点

  锚是一种特殊的链接，专门用以标志出可供跳转到位置。十分使用，相当与在页面内部的跳转链接。其中我们需要进行两步，第一步是放置锚点，第二部是设置跳转。

1. 放置锚点：其代码为<span id="anchor_name">锚点</span>，我们可以把这个锚点放在任意位置，那么在那里出现的锚点二字就是我们的锚点。注：有些编译器支持的自己特定的锚点语法，所以用这种html才是最通用的
2. 设置跳转：其代码为[跳转](#anchor_name)，我们可以在任意位置点击跳转，那么就会将页面跳转到对应的锚点处。
     我在2.6小节的开头放置了如下的锚点<span id="jump"></span>。然后我在下面放置一个跳转[跳转到2.6小节](#jump)：
   跳转到2.6小节

3.7 缩略

  对于一些缩略的文字，我们可以使用缩略的提示。注：将鼠标放到经过缩略的文本上方就可以得到其全称的提示。例如：

*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
The HTML specification is maintained by the W3C.

显示为：
The HTML specification is maintained by the W3C.

3.8 Emoji

  支持表情包的编译器比较少,但可以试一试。
:smile: :fa-car:，显示为：😄 :fa-car:

4 代码

  代码块用以呈现须原样输出的文本，所以一般来说在代码块里写的内容中，特殊字符是不需要转义的。注：代码也是一种基本语法，但是由于内容比较多，所以单独提出。
  代码块有两种，一种在行内，另一种可以跨行。

4.1 行内代码块输入

  我们可以在每一行内插入相应的代码，这可以有一定的强调作用，同时也可以体现它们是代码。行内代码如下创建：

方法1：
请输入一串代码`input()`。

结果如下：
请输入一串代码input()。

方法2：（适用与行内代码中包含`字符的情况）
请输入一串代码`` a`1 ``。

结果如下：
请输入一串代码a`1。

4.2 跨行代码块输入

  跨行代码块（简称代码块）的功能很强大，我们可以输入不同语言的代码块，例如Python、Matlab和C++等语言。通常代码块如下创建：

方法1：（md原生方法）
代码内容

方法2：（基于html）
<pre><code>  
代码内容   
</pre><code>

  其中代码语言是具体的名字，如python，matlab，C++（当然也可以不填写）。当添写代码语言的名字时，是用来写程序的；不添写的时候，可用来当做一个单独的块状区域来记录一些东西。
  代码内容随便添写，但是这时就不需要转义字符了。同时，有一些插件是支持在markdown的代码块中运行代码的，例如Atom的Hydrogen。
注：代码块的功能很强大，不仅仅可以用来放入代码，还可以用来制作流程图等酷炫的效果，以后再继续讨论。

4.2.1 Python代码输入

代码：注：以后其他的语言代码类似，就不一一列出

# Python代码输入
a='Hello '
b=['P','y','t','h','o','n','!']
for i in range(len(b)):
    a+=b[i]
print(a)

结果显示：

# Python代码输入
a='Hello '
b=['P','y','t','h','o','n','!']
for i in range(len(b)):
    a+=b[i]
print(a)

4.2.2 Matlab代码输入

% Matlab代码输入
a='Hello ';
b={'M','a','t','l','a','b','!'};
for i=1:length(a)
  a=[a,b{i}];
end
disp(a)

4.2.3 C++代码输入

// C++代码输入
#include <iostream>
#include <cstring>
using namespace std;
int main()
{
	char a[11] = "Hello ";
	char b[5]={'C','+','+','!'};
	strcat(a,b);
	cout<<a;
	return 0;
}

4.2.4 代码块的class输入

  在某些编译器中可以在代码块中设置 class。例如line-numbersclass，用来显示代码的行数。

{.line-numbers}
# Python代码输入
a='Hello '
b=['P','y','t','h','o','n','!']
for i in range(len(b)):
    a+=b[i]
print(a)

结果显示：

{.line-numbers}

# Python代码输入
a='Hello '
b=['P','y','t','h','o','n','!']
for i in range(len(b)):
    a+=b[i]
print(a)

5 公式

  当然我们还可以输入公式，对于markdown来说显示公式的方法有许多，但是通常都是基于使用KaTeX或者MathJax，有的编译器不支持的，可以利用从网上贴图的方式，但通常都会支持。

5.1 一般公式输入

  一般公式都是基于KaTex或者MathJax, 二者编译规则几乎相同，相应的规则可以参考KaTex规则。
  常见的公式输入方法如下面列出：
注：不同的编译器会使用不同的方法（甚至可能下面的方法都没用），那就需要具体的查看了。

• 行内式：两种方法

  1. $a^2+b^2=c^2$，显示为 $a^2+b^2=c^2$
  2. \(\sqrt{a^2+b^2=c}\)，显示为 (\sqrt{a^2+b2=c})

• 块内式：三种方法

  1. $$E=mc^2\tag*{hi} \tag{1}$$, 显示为$$E=mc^2 \tag{1}$$
  2. \[F=ma \tag{2}\]，显示为[F=ma \tag{2}]

  
    
  F=G\frac{Mm}{r^2} \tag{3}
  

  
  显示为

  F=G\frac{Mm}{r^2} \tag{3}

  注：如果大多数的编译器都不支持使用\tag{}这个用法，我是通过使用MathJax引擎来使用，可能Katex引擎并不支持，但是Katex的官方教程却有这个用法......

5.2 网络贴图公式输入

  这种通过网络贴图来进行公式输入的方法是用在实在没有其他方法来编辑公式的时候才使用的（例如Github），平常的时候并不推荐使用，因为大多数都是以图片的形式粘贴上的，所以无法选中，而且许多方法的图片过于模糊，同时也需要联网加载。
  有许多种方法提供相应的功能（甚至最简单的方法都可以自己编辑一个公式后变成图片，然后贴图），下面介绍几种常见的方法，如果有兴趣还可以去网上找其他的方法。

1. CodeCogs提供了一个在线LaTeX编辑器，可以将输入的数学公式转换为图片，并自动生成 HTML 代码（也支持其他格式）。
   结果如下：
   

2. 也可以CodeCogs的更直接一点的方法：

   <img src="https://latex.codecogs.com/svg.latex?\Large&space;x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}">

   结果如下：
   

3. 可以连接MathJax提供的引擎，添加MathJax引擎需要使用到下面的代码：

   <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"></script>

   然后，再使用Tex写公式，这个方法不单适用与Markdown，也可以用来做网页，可参考这个教程。

6 目录

  通常我们需要在开头加上目录，不同的编译器可能支持不同的目录方式。当然也可以完全通过使用页内跳转一点一点的编辑，但是这样很慢。
  最为常见的就是使用[TOC]来调用目录，注：TOC全称为Table Of Contents。例如本文的目录代码：

---
<font size=5><b>&emsp;目录</b></font>
[TOC]
---

具体效果见本文题目
  同时我们要发现，有的时候我们并不希望文中的某些标题被放入的目录中，那么这个时候我们需要在标题的后面添加{ignore=true}。注：有些编译器并不支持
  例如：# 标题1 {ignore=true}。

7 流程图

  当然有时我们还需要制作流程图。不同的编译器支持的不同，目前我发现制作流程图功能最全且最强大的是一个插件MPE——Markdown Preview Enhanced，具体的一些应用还是去MPE的官网上找比较好。在本文简单介绍一下就好，我将以不同的扩展功能(不同的js)分别介绍。

7.1 Flow Charts

  我们最为常见的就是使用流程图了，下面介绍的方法是基于flowchart.js，具体的教程也可以去其官网上看。

显示为：

### 7.2 Sequence Diagrams   我们也可以使用序列图了，下面介绍的方法是基于[ js-sequence-diagrams](https://bramp.github.io/js-sequence-diagrams/ "js-sequence-diagrams的官网")，具体的教程也可以去其官网上看。

Andrew->China:Says hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks
Andrew->B: Normal line
Note over Andrew: Note over Andrew
Note over China,B: Note over China,B

显示为：

Andrew->China:Says hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks
Andrew->B: Normal line
Note over Andrew: Note over Andrew
Note over China,B: Note over China,B

7.3 Mermaid

  下面隆重介绍一下Mermaid，可以说掌握了这个就可以掌握好多种图像了，功能十分强大，具体的教程也可以去其官网上看。

7.3.1 Mermaid的流程图

  更像是树状图。具体可参考 https://mermaidjs.github.io/flowchart.html。

1. 有以下几种方向：

TB - top bottom
BT - bottom top
RL - right left
LR - left right
TD - same as TB

2. 有以下几种节点：

[]   - 方块（默认）
()   - 圆角矩形
(()) - 圆
>]   - 书签
{}   - 菱形

3. 有以下几种箭头：

-->         - 普通箭头
---         - 实线
-.->        - 虚线箭头
==>         - 粗箭头

-->|text|   - 箭头中有文本（前面的箭头可以更换）

graph TB
A[Hard edge] -->|Link text| B(Round edge)
B -.-> C{Decision}
C -->|One| D>Result one]
C ==>|Two| E((circle edge))

显示为：

graph TB
A[Hard edge] -->|Link text| B(Round edge)
B -.-> C{Decision}
C -->|One| D>Result one]
C ==>|Two| E((circle edge))

7.3.2 Mermaid的序列图

  序列图。具体可参考 https://mermaidjs.github.io/sequenceDiagram.html

1. 有以下几种Messages：

->	Solid line without arrow
-->	Dotted line without arrow
->>	Solid line with arrowhead
-->>	Dotted line with arrowhead
-x	Solid line with a cross at the end (async)
--x	Dotted line with a cross at the end (async)

2. 可以对目标进行激活：注：允许多重激活

activate A   激活A
deactivate A 取消激活A
在Messages后面 +A 激活A
在Messages后面 -A 取消激活A

sequenceDiagram
participant Alice
participant Bob
Alice->John: Hello John, how are you?
loop Healthcheck
    John->John: Fight against hypochondria
end
Note right of John: Rational thoughts 
prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!

显示为：

sequenceDiagram
participant Alice
participant Bob
Alice->John: Hello John, how are you?
loop Healthcheck
    John->John: Fight against hypochondria
end
Note right of John: Rational thoughts 
prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!

7.3.3 Mermaid的甘特图

  甘特图。具体可参考 https://mermaidjs.github.io/gantt.html

gantt
dateFormat YYYY-MM-DD
title 产品计划表
section 初期阶段
明确需求: 2016-03-01,10d
section 中期阶段
跟进开发: 2016-03-11,15d
section 后期阶段
走查测试:2016-03-20,9d

显示为：

gantt
dateFormat YYYY-MM-DD
title 产品计划表
section 初期阶段
明确需求: 2016-03-01,10d
section 中期阶段
跟进开发: 2016-03-11,15d
section 后期阶段
走查测试:2016-03-20,9d

8 总结

  Markdown在我看来是一个用来快速记笔记的语言，当然也可以用来写教程，它和Word不一样的就是，完全可以用代码来实现一篇结构完整的文章啊，多么适合我们这种撸代码的啊！妈妈再也不用担心我被Word的各种奇怪的格式问题支配啦！好吧，激动了，但是说实话，我真的很推荐Markdown，学习成本低，还特别实用。有人说其过于简单，那是因为他们没有研究透，难一点的话和HTML、CSS、JavaScript各种联合起来的话，效果能炫到我们想象不到。
  这是可以说是我第一次写教程，感觉没有想象的那么快，断断续续的花了6天才写完，但是过程还是很享受的，希望我以后能写出更好的教程，自己可以复习，也作出了分享。

---

To my family,with love
To my friend,with encourage
To my teacher,with gratitude

st=>start: 开始:>https://www.baidu.com e=>end: 结束 op1=>operation: 操作1 op2=>operation: 操作2 sub1=>subroutine: 子程序1 cond=>condition: 对 或错? io=>inputoutput: 输入输出 st->op1->cond cond(yes)->io->e cond(no,right)->op2(bottom)->sub1 sub1(right)->op1{"scale":1,"line-width":2,"line-length":50,"text-margin":10,"font-size":12}st=>start: 开始:>https://www.baidu.com e=>end: 结束 op1=>operation: 操作1 op2=>operation: 操作2 sub1=>subroutine: 子程序1 cond=>condition: 对 或错? io=>inputoutput: 输入输出 st->op1->cond cond(yes)->io->e cond(no,right)->op2(bottom)->sub1 sub1(right)->op1{"scale":1,"line-width":2,"line-length":50,"text-margin":10,"font-size":12}

---

1. 罗贯中.《三国演义》[J]。 ↩︎ ↩︎

2. 司马迁.《史记》[J]。 ↩︎

3. 鲁迅.《故乡》[J]。 ↩︎