Complete Guide to Markdown Features | Word Count: 3.5k | Reading Time: 13mins |
标题 1 语法：# 标题名字（井号的个数代表标题的级数，最多到六级标题）
一级标题 二级标题 三级标题 四级标题 五级标题 六级标题
文字样式 删除线 1 2 语法：用两个 ~ 来包裹删除的内容 ~~文本内容被删除~~
文本内容被删除
斜体 1 2 3 语法：用一个 \* 来包裹斜体的内容 _文本内容倾斜_
文本内容倾斜
快捷键：选中需要斜体的内容后 Ctrl+I
加粗 1 2 3 语法：用两个 \* 来包裹加粗的内容 **文本内容加粗**
文本内容加粗
快捷键：选中需要加粗的内容后 Ctrl+B
斜体+加粗 1 2 3 语法：用三个 \* 来包裹斜体+加粗的内容 **_文本内容既倾斜又加粗_ **
文本内容既倾斜又加粗
下划线 1 2 3 下划线是HTML语法：用 <u > <u > </u >
文本内容添加下划线
快捷键：选中需要添加下划线的内容后 Ctrl+U
高亮（需在偏好设置勾选扩展语法） 1 2 3 语法：用 == 来包裹高亮内容 ==文本内容高亮==
==文本内容高亮==
下标（需在偏好设置勾选扩展语法） 1 2 3 4 语法：用 ~ 来包裹下标内容 水 H~2~O 双氧水 H~2~O~2~
水 H2O
双氧水 H2O2
上标（需在偏好设置内选扩展语法） 1 2 3 4 语法：用 ^ 来包裹上标内容 平方米 m^2^ 立方米 m^3^
平方米 m^2^
表格 表格的源码格式：
使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行：
1 2 3 4 | name | gender | | -------- | ------ | | Torvalds | Male | | Tove | Female |
为了使 Markdown 更清晰，| 和 - 两侧需要至少有一个空格（最左侧和最右侧的 | 外就不需要了）。
可以跳过以上描述，因为表格的 markdown 源代码是由typora自动生成的。
实际上输入 | Name | Gender | 并按下 enter 键将创建一个包含两列的表。
创建表后，焦点在该表上将弹出一个表格工具栏，您可以在左上角调整表格，居中居左居右对齐或删除表格。您还可以右上角使用上下文菜单来移动，复制和添加/删除列/行。还可以在表格中包括内联 Markdown 语法，例如链接，粗体，斜体或删除线。
Name
Gender
Torvalds
Male
Tove
Female
除此之外可以使用空格对齐不同行的单元格，并在左右两侧都使用 | 来标记单元格边界，在表头下方的分隔线标记中加入 :，即可标记下方单元格内容的对齐方式：
1 2 3 4 | Name | Gender | Age | | :------- | :----: | --: | | Torvalds | Male | 55 | | Tove | Female | 58 |
Name
Gender
Age
Torvalds
Male
55
Tove
Female
58
使用快捷键Ctrl+T更方便(段落→表格→插入表格，即可查看快捷键)可以自定义表格大小。
引用
引用文本内容
可以在引用中
使用嵌套的引用
目录 语法：[TOC] + enter
生成的目录内容会随笔者编辑而自动更新。
列表 无序列表–符号 空格 1 2 3 4 5 - 可以使用 `*` 作为标记* 也可以使用 `+` - 或者 `-`
可以使用 * 作为标记（不推荐使用星号）
也可以使用 +
或者 -
有序列表–数字 . 空格 1 2 3 1. 有序列表以数字和 `.` 开始；2. 数字的序列并不会影响生成的列表序列；3. 但仍然推荐按照自然顺序（1.2.3...）编写。
有序列表以数字和 . 开始；
数字的序列并不会影响生成的列表序列；
但仍然推荐按照自然顺序（1.2.3…）编写。
1 可以使用：数字\. 来取消显示为列表（用反斜杠进行转义）
代码 代码块 1 2 public static void main (String[] args) { }
行内代码 1 2 3 也可以通过 ``，插入行内代码（` 是 `Tab` 键上边、`ESC` 下面的、数字 `1` 键左侧的那个按键）： 例如 `Markdown`
Markdown
分隔线 可以在一行中使用三个或更多的 *、- 或 _ 来添加分隔线（``）：
任务列表 1 2 3 4 语法： 未完成事项:- [ ] 已完成事项:- [x] 可以通过鼠标左键勾选或取消方框内的√。
跳转 外部跳转–超链接 语法： [注释/命名](具体链接)
1 [帮助文档 ](https://support.typoraio.cn/Markdown-Reference/ )
帮助文档
内部跳转–本文件内跳 语法： [注释/命名](#要去的目的地--标题）。
跳转到文字
自动链接 使用 <> 包括的 URL 或邮箱地址会被自动转换为超链接：
https://www.baidu.com
本地图片 图像与链接类似， 但在链接语法之前需要添加额外的 ! 字符。 图像语法如下所示：
1 2  P.s.用相对路径或绝对路径都可以 或者直接拷贝到Typora内。
数学表达式(支持Latex语法) 内联公式 例如不定积分公式：$\int f(x)dx = F(x) + c (c\in {\forall} constants)$
行外公式 1 使用`ctrl + shift + m` 创建数学公式块
P.s.数学(M +m **。
例如单调收敛定理：
$$
利用Markdown画图 MarkDown画图也是轻量级的，功能并不全。
但是MarkDown支持sequence，flowchart和mermaid三种图表类型。
sequence使用的是js-sequence-diagrams。
flowchart使用的是flowchart.js。
Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。Mermaid 作为一个使用 JS 渲染的库，生成的不是一个“图片”，而是一段 HTML 代码。
（不同的编辑器渲染的可能不一样）
图表类型
支持来源
备注
Sequence
js-sequence-diagrams
UML 时序图
Flowchart
flowchart.js
流程图
Mermaid
mermaid
集成的强大的图表库，支持时序图、流程图、甘特图、类图、饼图等
接下来我将一一介绍上述三种类型的图表。
Sequence Diagrams 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 Title: MarkDown时序图实例 participant 客户端 participant 控制器 participant 业务 participant 数据库 客户端->>数据库:提交数据店铺 Note right of 客户端:提交数据进行验证 控制器->>控制器:验证数据完整性 Note left of 控制器:返回错误的字段信息 控制器-->>客户端:数据不完整 Note over 客户端: 用户输入通行证的账号、密码 控制器->>业务:保存店铺到数据库 业务->>业务:save店铺数据 业务-->>控制器:保存出现异常 控制器-->>客户端:保存成功 数据库-->>业务:success 业务-->>控制器:success 控制器-->>客户端:success 客户端 Note left of 控制器:返回正确的提示，并跳转到审核第二步
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 Title: MarkDown时序图实例 participant 客户端 participant 控制器 participant 业务 participant 数据库 客户端->>数据库:提交数据店铺 Note right of 客户端:提交数据进行验证 控制器->>控制器:验证数据完整性 Note left of 控制器:返回错误的字段信息 控制器-->>客户端:数据不完整 Note over 客户端: 用户输入通行证的账号、密码 控制器->>业务:保存店铺到数据库 业务->>业务:save店铺数据 业务-->>控制器:保存出现异常 控制器-->>客户端:保存成功 数据库-->>业务:success 业务-->>控制器:success 控制器-->>客户端:success 客户端 Note left of 控制器:返回正确的提示，并跳转到审核第二步
1 2 3 4 5 - 代表实线 ， 主动发送消息，比如 request请求 > 代表实心箭头 ， 同步消息，比如 AJAX 的同步请求 > -- 代表虚线，表示返回消息，spring Controller return > > > 代表非实心箭头 ，异步消息，比如AJAX请求
Flowcharts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 st=>start: 开始框 op=>operation: 处理框 cond=>condition: 判断框(是或否?) sub1=>subroutine: 子流程 io=>inputoutput: 输入输出框 e=>end: 结束框 st->op->cond cond(yes)->io->e cond(no)->sub1(right)->op
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 st=>start: 出发 op=>operation: 下雨 cond=>condition: 带雨伞 sub1=>subroutine: 回家取伞 io=>inputoutput: 继续出行 e=>end: 到达目的地 st->op->cond cond(yes)->io->e cond(no)->sub1(right)->op
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 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
Mermaid 流程图 关键字graph表示一个流程图的开始，同时需要指定该图的方向。
其中“方向描述”为：
用词
含义
TB
从上到下
BT
从下到上
RL
从右到左
LR
从左到右
T = TOP，B = BOTTOM，L = LEFT，R = RIGHT，D = DOWN
最常用的布局方向是TB、LR。
1 2 3 4 graph TB; A-->B B-->C C-->A
1 2 3 4 graph TB; A-->B B-->C C-->A
1 2 3 4 graph LR; A-->B B-->C C-->A
1 2 3 4 graph LR; A-->B B-->C C-->A
节点形状
表述
说明
含义
id[文字]
矩形节点
表示过程，也就是整个流程中的一个环节。
id(文字)
圆角矩形节点
表示开始和结束。
id((文字))
圆形节点
表示连接。为避免流程过长或有交叉，可将流程切开。
id{文字}
菱形节点
表示判断、决策。
id>文字]
右向旗帜状节点
单向箭头线段 ：表示流程进行方向
id即为节点的唯一标识，A~F 是当前节点名字，类似于变量名，画图时便于引用
括号内是节点中要显示的文字，默认节点的名字和显示的文字都为A
1 2 3 4 5 6 7 graph TB A B(圆角矩形节点) C[矩形节点] D((圆形节点)) E{菱形节点} F>右向旗帜状节点]
1 2 3 4 5 6 7 8 graph TB A B(圆角矩形节点) C[矩形节点] D((圆形节点)) E{菱形节点} F>右向旗帜状节点]
1 2 3 4 5 6 7 %% 语法示例 graph TB sport(出发运动)--> badminton[羽毛球] badminton --> IsWin{"有没有赢下单打比赛？"} IsWin -->|有|happy[赢下比赛]-->goBack(回家) IsWin -->|没有|sad[再接再厉]-->goBack
1 2 3 4 5 6 graph TB sport(出发运动)--> badminton[羽毛球] badminton --> IsWin{"有没有赢下单打比赛？"} IsWin -->|有|happy[赢下比赛]-->goBack(回家) IsWin -->|没有|sad[再接再厉]-->goBack
连线 1 2 3 4 5 6 7 8 9 10 11 12 13 graph TB A1-->B1 A2---B2 A3--text---B3 A4--text-->B4 A5-.-B5 A6-.->B6 A7-.text.-B7 A8-.text.->B8 A9===B9 A10==>B10 A11==text===B11 A12==text==>B12
1 2 3 4 5 6 7 8 9 10 11 12 13 graph TB A1-->B1 A2---B2 A3--text---B3 A4--text-->B4 A5-.-B5 A6-.->B6 A7-.text.-B7 A8-.text.->B8 A9===B9 A10==>B10 A11==text===B11 A12==text==>B12
UML时序图 1 2 3 4 5 6 7 sequenceDiagram 顾客-->API: 预约产品 API-->预约服务: 开始预约流程 break 当预约失败时 API-->顾客: 展示预约失败原因 end API-->支付账单服务: 开始支付账单流程
1 2 3 4 5 6 7 8 sequenceDiagram 顾客-->API: 预约产品 API-->预约服务: 开始预约流程 break 当预约失败时 API-->顾客: 展示预约失败原因 end API-->支付账单服务: 开始支付账单流程
甘特图 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 %% 语法示例 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 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 section 测试 功能测试 :active, a1, after des3, 3d 压力测试 :after a1 , 20h 测试报告 : 48h
类图 1 语法解释：<|-- 表示继承，+ 表示 public，- 表示 private。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 classDiagram 动物 <|-- 鸭子 动物 <|-- 鱼 动物 <|-- 斑马 动物 : +int age 动物 : +String gender 动物: +isMammal() 动物: +mate() class 鸭子{ +String beakColor +swim() +quack() } class 鱼{ -int sizeInFeet -canEat() } class 斑马{ +bool is_wild +run() }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 classDiagram 动物 <|-- 鸭子 动物 <|-- 鱼 动物 <|-- 斑马 动物 : +int age 动物 : +String gender 动物: +isMammal() 动物: +mate() class 鸭子{ +String beakColor +swim() +quack() } class 鱼{ -int sizeInFeet -canEat() } class 斑马{ +bool is_wild +run() }
状态图 1 2 3 4 5 6 7 stateDiagram [*] --> Still Still --> [* ]Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]
1 2 3 4 5 6 7 8 stateDiagram [*] --> 静止 静止 --> [*] 静止 --> 运动 运动 --> 静止 运动 --> 碰撞 碰撞 --> [*]
饼图 1 2 3 4 5 pie title Pie Chart "狗" : 386 "猫" : 85 "老鼠" : 150
1 2 3 4 5 pie title Pie Chart "狗" : 386 "猫" : 85 "老鼠" : 150
This article is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Please attribute the original author and source when sharing.
Wechat
Alipay
