1 什么是 Markdown

Markdown 是一种 标记语言 ，可以使用普通文本编辑器编写。通过简单的标记语法，可以使普通的文本内容具有一定的格式。 Markdown语法简单，界面简洁，排版功能强大，让编辑者可以更多地关注内容本身，而不需要过多关注排版； Markdown 有很多功能。以下是 Markdown 对于以下类型用户的优势：

• 程序员：全世界几乎所有程序员都在使用 Markdown 做笔记。使用markdown可以大大提高程序员学习和做笔记的效率。特别是markdown可以突出显示各种语言的代码块。非常对程序员友好。

• 业务员：语言简单，界面友好，无需排版，可以更加关注内容，输入法体验极佳。

• 理工科：Markdown语法具有强大的扩展功能，如表格、脚注、嵌入HTML等。此外，Markdown还支持Latex数学公式语法，可以快速编写数学公式，适合科学和工程专业的学生。对朋友非常友好。

  Markdown 语法简单，只需几十分钟即可启动。

2 Markdown 平台和软件

2.1 Windows

VSCode、Atom、CuteMarkEd、MarkdownPad、Miu、Typora、RStudio

2.2 Linux

VSCode、Atom、Typora、ReText、UberWriter、RStudio

2.3 MAC

旁白，第一天，社论，草稿 4，抹茶 3

2.4浏览器插件

MaDo (Chrome)：Marxico (Chrome)

2.5 个人笔记

效果：无论使用哪种表达方式，显示效果都是一样的。

3.1.5 代码

(1) 单行代码

语法：使用两个 ` 符号

示例：

 这是单行代码显示样式

效果

这是单行代码显示样式

(2) 多行代码块

语法：使用三个 ` 符号并按“回车”键

示例：

​```
这是一个多行代码块，它可以包含一段或多段代码，并且可以用任何语言编写。

效果：

这是一个多行代码块，可以包含一段或多段代码，可以用任何语言编写

3.1.6 报价

语法：在“>”符号后面加一个空格，然后添加引号。

效果：

这就是引用的效果

3.1.7 转义字符

有时我们需要输出某个符号，但它是由软件编译出来的，无法实现。这种情况下需要转义字符来帮助输出

语法：使用反斜杠\+，使用需要输出的符号来实现

示例：

*无转义字符
\* 有转义字符

效果

• 无转义字符
  * 有转义字符

3.1.8 插入链接

语法：[链接名称]（链接地址）或<链接地址>

示例：

这是【冷哥个人博客网站】(https://www.hack95.com)
这是冷哥的个人博客网站：

效果

这是一个学习极客的个人博客网站

这是学习极客的个人博客网站：https://www.hack95.com

3.1.9 插画图片

语法：！ 【图片替换文字、任意文字、留空】（文件路径或图片链接），当然你也可以直接粘贴或者直接拖进去。

示例：

！[头像](C:\Users\Wang\Desktop\Avatar.jpg)

效果

3.1.10 插入表

语法：Markdown 表格使用 | 来分隔不同的单元格，并使用 - 来分隔表格标题和其他行。

对齐：

示例：

|左对齐|右对齐|中心对齐|
| :-----| ----: | :----: |
|细胞|细胞|细胞|
|细胞|细胞|细胞|

效果：

3.1.11 文本缩进语法

语法：

 半角空格
两个半角空格
全角空间两个全角空格，用于第一行的缩进

示例：

这是没有空格的
这是一个半角空格
这是两个半角空格
这是一个全角空间
这是两个全角空格，通常用于缩进第一行。
注意：一定要加分号，否则不是markdown语法

效果：

这里没有空格
这是半角空格
这是两个半角空格
这是全角空格
这是两个全角空格，常用于第一个线压痕

3.2 高级语法

目前 Markdown 支持三种流程图工具：序列、流程图和美人鱼。使用markdown语法直接绘制图片不需要考虑其他干扰，并且可以更好地将图形嵌入到文档中。 Mermaid 是一个用于绘制流程图、状态图、序列图和甘特图的库。它可以完全替代序列和流程图。

3.2.1 美人鱼语法

(1) 语法

图形方向描述描述语句

注：

• 语法必须写在代码块内
• 必须选择代码的语言。不同的工具包要选择对应的代码语言，分别是：Mermaid、Sequence、Flow（注意流程图的代码语言是Flow而不是流程图）

(2)语法解释

A。方向说明

B.节点

说明：id为程序框图的识别标志，文本为框中显示的文字，各种括号包裹文本是框图的形状

C。连接线样式

D。子图语法

subgraph 子图名称描述语句（同上）
结尾

3.2.2 流程图

以下是使用mermaid和flowchart这两个工具包绘制的流程图。美人鱼功能更全面，可操作性更高，但图形效果不太理想，而流程图语法更简单，图形效果美观。显然我们更喜欢使用示例2的效果，并且示例2中使用的流程图工具包语法更简单，更容易理解，所以这里不再赘述。详细信息请参见示例代码。

(1) 示例1（美人鱼）

图TB
A[开始] --> B(初始化)B --> C[条件 1]C --> |YES| C1{条件2}C --> |NO| C2{条件3}C1 -->|是| D[结果 1]C1 -->|NO| E[结果 2]C2 -->|是| F[结果 3]C2 -->|NO| B(初始化)D[结果 1] --> G (结束)E[结果 2] --> G(结束)

(2) 效果

（3）示例2（flowchart）

flow
st=>start: 开始
op=>operation: 初始化
op1=>operation: 结果1
op2=>operation: 结果2
op3=>operation: 结果3
c1=>condition: 条件1
c2=>condition: 条件2
c3=>condition: 条件3
e=>endst->op->c1
c1(yes)->c2
c1(no)->c3
c2(yes)->op1->e
c2(no)->op2->e
c3(yes)->op3->e
c3(no)->op

（4）效果

3.2.3 时序图

时序图（Sequence Diagram），又名序列图、循序图，是一种UML交互图。它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。它可以表示用例的行为顺序，当执行一个用例行为时，其中的每条消息对应一个类操作或状态机中引起转换的触发事件。在markdown中使用sequence工具包制作。

语法：

示例1：

Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!

效果：

示例2：

Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow

效果：

以上示例均来源于sequence官网：https://www.hack95.com/js-sequence-diagrams/，更多内容请前往相关晚上查找资料学习。

3.2.4 甘特图

甘特图（Gantt chart）又称为横道图、条状图(Bar chart)。其通过条状图来显示项目，进度，和其他时间相关的系统进展的内在关系随着时间进展的情况。在markdown中使用mermaid工具包制作。

语法：

示例：

gantt         dateFormat  YYYY-MM-DD   title 使用mermaid语言定制甘特图section 任务1已完成的任务           :done,id1, 2019-12-06,2019-12-08正在进行的任务         :active,id2, 2019-12-09, 3d待完成任务1           :         id3, after id2, 5d待完成任务2           :         id4, after id3, 5dsection 关键任务已完成的关键任务       :crit, done, 2019-12-06,24h已完成的关键任务2      :crit, done, after id1, 2d正在进行的关键任务     :crit, active, 3d待完成的关键任务       :crit, 5d待完成任务            :2d待完成任务2           :1d

效果：

3.3 文件导出

markdown提供了导出功能，可以将上面的所有内容和图形导出为各种文件格式，不同的编辑器支持的导出格式各异，不过也有一把瑞士军刀啦——pandoc，这把军刀可以把Markdown转换成日常所需的文件格式啦，如需求量大的话，请留言啦，下次安排一下啦。

4 Markdown与HTML

以上基础可以解决了我们的基本应用，但有时我们想用颜色或字体大小等突出文字又该怎么实现呢？

markdown具有超强的拓展功能，支持HTML语法，不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。需要HTML语法学习的朋友请自行学习，下面仅列出在markdown中常用到的HTML语法。

4.1 HTML元素

目前支持的HTML元素：
等

使用 Ctrl+ALT+Del 重启电脑

文本内容

这是华文行楷

文本内容  #默认字体大小为3号

我是1号字
我是2号字
我是3号字
我是4号字
我是5号字
我是6号字
我是7号字

文本

color=#0099ff
color=red

文本内容

我想居中