MarkDown语法说明

学习链接：菜鸟教程 MarkDown 教程

文章目录

• 1. MarkDown 列表
• • 1.1 无序列表：
  • • 演示1：
    • 代码1：
    • 演示2：
    • 代码2：
    • 演示3：
    • 代码3：
  • 1.2 有序列表：
  • • 演示：
    • 代码：
• 2. MarkDown 区块
• • 2.1 区块使用
  • • 演示：
    • 代码：
  • 2.2 嵌套使用
  • • 演示：
    • 代码：
  • 2.3 使用列表
  • • 演示：
    • 代码：
  • 2.4 列表中使用区块
  • • 演示：
    • 代码：
• 3. MarkDown 代码
• • • 演示：
• 4. MarkDown 链接
• 5. MarkDown 图片
• • • 演示：
• 6. MarkDown 表格
• • 6.1 表格对齐方式
• 7. MarkDown 高级技巧
• • 7.1 支持的HTML元素
  • 7.2 转义
  • 7.3 公式
  • • 演示：
  • 7.4 流程图
  • • 7.4.1 横向流程图格式
    • 7.4.2 竖向流程图格式
    • 7.4.3 标准流程图格式
    • 7.4.4 标准横向流程图格式
    • 7.4.5 UML 时序图格式
    • 7.4.6 UML 时序图复杂格式
    • 7.4.7 UML 标准时序图格式
    • 7.4.8 甘特图格式

1. MarkDown 列表

1.1 无序列表：

演示1：

• 列表1
• 列表2
• 列表3
• …

代码1：

* 列表1
* 列表2
* 列表3
* ...

---

演示2：

• 列表1
• 列表2
• 列表3
• …

代码2：

+ 列表1
+ 列表2
+ 列表3
+ ...

---

演示3：

• 列表1
• 列表2
• 列表3
• …

代码3：

- 列表1
- 列表2
- 列表3
- ...

1.2 有序列表：

演示：

1. 列表1
2. 列表2
3. 列表3
4. …

代码：

1. 列表1
2. 列表2
3. 列表3
4. ...

2. MarkDown 区块

2.1 区块使用

演示：

区块引用
…
…

代码：

> 区块引用
> ...
> ...

2.2 嵌套使用

演示：

最外层

第一层嵌套

第二层嵌套

代码：

> 最外层
> > 第一层嵌套
> > > 第二层嵌套

2.3 使用列表

演示：

区块中使用列表

1. 列表1
2. 列表2
3. 列表3

• 无序列表1

• 无序列表2

• 无序列表3

代码：

> 区块中使用列表
> 1. 列表1
> 2. 列表2
> 3. 列表3
> * 无序列表1
> + 无序列表2
> - 无序列表3

2.4 列表中使用区块

演示：

• 第一项

  区块1【tab键】
  区块2

• 第二项

代码：

* 第一项
    > 区块1【tab键】
    > 区块2
* 第二项

3. MarkDown 代码

演示：

写一个简单的 Hello World C语言小程序

#include <stdio.h>

int main(){

    printf("Hello World");
    return 0;
}

4. MarkDown 链接

[链接名称](链接地址)
    或者
<链接地址>

如:https://www.baidu.com 或者 百度

还有其他写法详见菜鸟教程

5. MarkDown 图片

Markdown 图片语法格式如下：
![alt 属性文本](图片地址)
![alt 属性文本](图片地址 "可选标题")

• 开头一个感叹号 !
• 接着中括号,里面填上替换文本,图片无法正常显示时
• 接着一个小括号,放入图片地址[图片地址放入http形式,本地图片采用相对地址]
  (小提示:插入图片与链接写法很类似)

演示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-swLQH8S4-1665393808988)(http://static.runoob.com/images/runoob-logo.png “RUNOOB”)]

Markdown 没有指定图片的高度与宽度,可以使用普通的<img> 标签

如:<img src="http://static.runoob.com/images/runoob-logo.png" width="50%">

6. MarkDown 表格

Markdown 制作表格使用|来分隔不同的单元格，使用-来分隔表头和其他行。

表头	表头	表头	表头
1	2	3	4
1	2	3	4

6.1 表格对齐方式

• -: 设置内容和标题栏居右对齐
• :- 设置内容和标题栏居左对齐
• :-: 设置内容和标题栏居中对齐

左对齐	右对齐	居中对齐
-------单元格	单元格--------	---------单元格---------
单元格	单元格	单元格

7. MarkDown 高级技巧

7.1 支持的HTML元素

不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。

目前支持的 HTML 元素有：<kbd> <b> <i> <em> <sup> <sub> <br>等 ，如：

使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑

使用 Ctrl+Shift+Esc 打开任务管理器

7.2 转义

Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdown 使用反斜杠转义特殊字符：

加粗文字
\*\*正常显示星号\*\*

Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：

• \ 反斜线
• ` 反引号
• * 星号
• _ 下划线
• {} 花括号
• [] 方括号
• () 小括号
• # 井字号
• + 加号
• - 减号
• . 英文句点
• ! 感叹号

7.3 公式

Markdown Preview Enhanced 使用 KaTeX 或者 MathJax 来渲染数学表达式。

KaTeX 拥有比 MathJax 更快的性能，但是它却少了很多 MathJax 拥有的特性。你可以查看 KaTeX supported functions/symbols 来了解 KaTeX 支持那些符号和函数。

默认的分隔符:

• $…$ 或者 \(…\) 中的数学表达式将会在行内显示。
• $$ … $$ 或者 ```math 中的 数学表达式将会在块内显示

演示：

$$\sum _{n=1}^{100}i=1+2+...+i=5050$$

$$\left\{\begin{array}{cc}a& b\\ c& d\end{array}\right\}$$

$$\begin{array}{ccc}A& \stackrel{a}{\leftarrow }& B\\ b\downarrow & & \uparrow c\\ C& =& D\end{array}$$

7.4 流程图

7.4.1 横向流程图格式

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

7.4.2 竖向流程图格式

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

7.4.3 标准流程图格式

flowchat
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op

7.4.4 标准横向流程图格式

flowchat
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

7.4.5 UML 时序图格式

sequenceDiagram
对象A->>对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->>对象A: 我很好(响应)
对象A->>对象B: 你真的好吗？

7.4.6 UML 时序图复杂格式

sequenceDiagram
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: 没人陪我玩

7.4.7 UML 标准时序图格式

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

7.4.8 甘特图格式

        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                           :done,    des1, 2022-10-06,2022-10-08
        原型                           :active,  des2, 2022-10-09, 3d
        UI设计                         :         des3, after des2, 5d
    未来任务                           :         des4, after des3, 5d
        section 开发
        学习准备理解需求               :crit, done, 2022-10-06,24h
        设计框架                       :crit, done, after des2, 2d
        开发                           :crit, active, 3d
        未来任务                       :crit, 5d
        玩耍                           :2d
        section 测试
        功能测试                       :active, a1, after des3, 3d
        压力测试                       :after a1  , 20h
        测试报告                       : 48h