学习过程中整理的MarkDown笔记，集前人之精华化繁为简，以未接触过MarkDown笔记的小白为主要对象，详细罗列了MarkDown基础知识并捎带涉及进阶内容，力求知识结构清晰，避免冗余。学习不精，欢迎批评指正。
文章目录
1
2
3
4
5
6
7
<a href="#Markdown__1">一、Markdown 简介</a> <a href="#Markdown__7">二、Markdown 工具</a> <a href="#Markdown__21">三、Markdown 基础语法</a>
<a href="#1_23">1、标题</a> <a href="#2_39">2、文本</a> <a href="#3_56">3、列表</a> <a href="#4_80">4、链接/图片</a> <a href="#5_95">5、引用</a> <a href="#6_109">6、水平线</a>
<a href="#1_110">（1）分隔线</a> <a href="#2_126">（2）删除线</a> <a href="#3_132">（3）下划线</a> <a href="#7_139">7、表格</a> <a href="#8_156">8、注脚</a> <a href="#9_175">9、代码</a> <a href="#_192">五、高级语法</a>
<a href="#1_194">1、目录</a> <a href="#2HTML_198">2、HTML</a> <a href="#3_202">3、流程图和时序图</a> <a href="#4_234">4、复选框</a> <a href="#5Markdown__246">5、Markdown 数学公式</a> <a href="#_248">六、快捷键</a>
一、Markdown 简介
Markdown 是一种轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）。 通过简单的标记语法，它可以使普通文本内容具有一定的格式，可以导出 PPT、HTML、Word、PDF、JPG 等多种格式的文档，文档后缀为 .md 或 .markdown。
由于 Markdown 的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。 如 GitHub、Reddit、CSDN、简书等，甚至还能被使用来撰写电子书。
二、Markdown 工具
Markdown 常用编写工具有 Typora (收费) 和 VSCode (免费) 等，由于一些众所众知的原因，本篇以 VSCode 为例
1
2
3
4
5
6
7
8
VSCode 相关插件：
Markdown All in One:载入 markdown 插件
Markdown Preview Enhanced:markdown 效果预览
Code Spell Checker:自动检测英文拼写
Paste Image:插入图片
mermaid:绘图工具
三、Markdown 基础语法
1、标题
一级标题 ==> 一个 # 号 二级标题 ==> 两个 # 号 N 级标题 ==> N 个 # 号
1
2
3
4
5
6
7
8
9
六级标题：
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
2、文本
斜体文本：编辑文本前后，输入【一个】星号 * 或下划线 _ 粗体文本：编辑文本前后，输入【两个】星号 ** 或下划线 __ 粗斜体文本：编辑文本前后，输入【三个】星号 *** 或下划线 ___
1
2
3
4
5
6
7
8
9
*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___
3、列表
无序列表：使用星号 * 、加号 + 或减号 - ，效果一致 有序列表：使用数字 1、2、3 等，并加上英文句号 .
1
2
3
4
5
6
7
8
* 无序列表 1
+ 无序列表 2
- 无序列表 3
1. 有序列表 1
2. 有序列表 2
3. 有序列表 3
控制层级：符号星号 * 、加号 + 或减号 - 前使用 tab
1
2
3
4
5
* 无序列表 1
+ 无序列表 2
- 无序列表 2.1
* 无序列表 2.2
4、链接/图片
原始链接：<链接地址> 文字链接：[链接名称] (链接地址) 图片链接：！[链接名称](链接地址 “title”)]
1
2
3
4
原始链接：<https://www.baidu.com>
文字链接：[百度搜索](https://www.baidu.com)
图片链接：
原始链接：https://www.baidu.com 百度搜索
5、引用
一层引用：一个右尖括号 > 二层引用：两个右尖括号 > N 层引用：N 个右尖括号 >
1
2
3
4
> 一层引用
>> 二层引用
>>> 三层引用
一层引用
二层引用
三层引用
6、水平线
（1）分隔线
【三个以上】星 * 或减号 -
1
2
3
4
5
---
***
* * ****
- - - ----
（2）删除线
删除文字前后添加【两个】~
不幸被删除
（3）下划线
下划线文字前后添加< u >< u />
愉快的下划线
7、表格
分隔列：使用竖线 | 分隔行：使用减号 - 对齐位置：冒号 : 位置决定对齐位置
左对齐：:- 右对齐：-: 居中对齐：:-:
1
2
3
4
5
左对齐 | 居中对齐 | 右对齐
:- | :-: | -:
1 | 2 | 3
小左 | 居中 | 小右
左对齐 居中对齐 右对齐 1 2 3 小左 居中 小右
nn### 8、注脚
脚注：文本右上角备注 尾注：文末备注内容
脚注：文本[^注脚名字]
1
2
3
4
5
6
百度搜索[^1]
[^1]: 我国著名的竞价广告商
百度[^2]
[^2]:https://www.baidu.com/
百度搜索
百度
9、代码
行内代码：内容前后【一个】反引号 `
JS 函数 Promise()
块内代码：内容前后【三个】反引号 ```
首行反引号后紧跟代码块语言，如```javascript
1
2
3
const numbers = [1, 1, 20, 3, 3, 3, 9, 9];
const uniqueNumbers = [...new Set(numbers)];
五、高级语法
1、目录
插入目录：输入 [TOC] (Table of Content) 即原地列出全部标题
2、HTML
支持原生 HTML 语法，内联样式书写
3、流程图和时序图
Mermaid 是一种基于 JS 的绘图工具，使用mermaid作为代码块的语言标识 流程图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
</foreignobject>
</g>
</g>
<g class="edgeLabel" style="opacity: 1;" transform="">
<g transform="translate(0,0)" class="label">
<rect rx="0" ry="0" width="0" height="0"></rect>
<foreignobject width="0" height="0">
</foreignobject>
</g>
</g>
<g class="edgeLabel" style="opacity: 1;" transform="">
<g transform="translate(0,0)" class="label">
<rect rx="0" ry="0" width="0" height="0"></rect>
<foreignobject width="0" height="0">
</foreignobject>
</g>
</g>
<g class="edgeLabel" style="opacity: 1;" transform="">
<g transform="translate(0,0)" class="label">
<rect rx="0" ry="0" width="0" height="0"></rect>
<foreignobject width="0" height="0">
</foreignobject>
</g>
</g>
</g>
<g class="nodes">
<g class="node default" id="flowchart-A-40" transform="translate(136,31)" style="opacity: 1;">
<rect rx="5" ry="5" x="-26" y="-23" width="52" height="46" class="label-container"></rect>
<g class="label" transform="translate(0,0)">
<g transform="translate(-16,-13)">
<foreignobject width="32" height="26">
爷爷
</foreignobject>
</g>
</g>
</g>
<g class="node default" style="opacity: 1;" id="flowchart-B-41" transform="translate(85,127)">
<rect rx="5" ry="5" x="-26" y="-23" width="52" height="46" class="label-container"></rect>
<g class="label" transform="translate(0,0)">
<g transform="translate(-16,-13)">
<foreignobject width="32" height="26">
爸爸
</foreignobject>
</g>
</g>
</g>
<g class="node default" style="opacity: 1;" id="flowchart-C-43" transform="translate(187,127)">
<rect rx="5" ry="5" x="-26" y="-23" width="52" height="46" class="label-container"></rect>
<g class="label" transform="translate(0,0)">
<g transform="translate(-16,-13)">
<foreignobject width="32" height="26">
叔叔
</foreignobject>
</g>
</g>
</g>
<g class="node default" style="opacity: 1;" id="flowchart-D-45" transform="translate(34,223)">
<rect rx="5" ry="5" x="-26" y="-23" width="52" height="46" class="label-container"></rect>
<g class="label" transform="translate(0,0)">
<g transform="translate(-16,-13)">
<foreignobject width="32" height="26">
大郎
</foreignobject>
</g>
</g>
</g>
<g class="node default" style="opacity: 1;" id="flowchart-E-47" transform="translate(136,223)">
<rect rx="5" ry="5" x="-26" y="-23" width="52" height="46" class="label-container"></rect>
<g class="label" transform="translate(0,0)">
<g transform="translate(-16,-13)">
<foreignobject width="32" height="26">
二郎
</foreignobject>
</g>
</g>
</g>
</g>
1
2
3
4
5
6
graph TD;
A(爷爷)-->B(爸爸);
A-->C(叔叔);
B-->D(大郎);
B-->E(二郎);
时序图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
</foreignobject>
</g>
</g>
<g class="edgeLabel" style="opacity: 1;" transform="">
<g transform="translate(0,0)" class="label">
<rect rx="0" ry="0" width="0" height="0"></rect>
<foreignobject width="0" height="0">
</foreignobject>
</g>
</g>
<g class="edgeLabel" style="opacity: 1;" transform="">
<g transform="translate(0,0)" class="label">
<rect rx="0" ry="0" width="0" height="0"></rect>
<foreignobject width="0" height="0">
</foreignobject>
</g>
</g>
<g class="edgeLabel" style="opacity: 1;" transform="">
<g transform="translate(0,0)" class="label">
<rect rx="0" ry="0" width="0" height="0"></rect>
<foreignobject width="0" height="0">
</foreignobject>
</g>
</g>
</g>
<g class="nodes">
<g class="node default" id="flowchart-A-56" transform="translate(34,127)" style="opacity: 1;">
<rect rx="5" ry="5" x="-26" y="-23" width="52" height="46" class="label-container"></rect>
<g class="label" transform="translate(0,0)">
<g transform="translate(-16,-13)">
<foreignobject width="32" height="26">
爷爷
</foreignobject>
</g>
</g>
</g>
<g class="node default" style="opacity: 1;" id="flowchart-B-57" transform="translate(136,79)">
<rect rx="5" ry="5" x="-26" y="-23" width="52" height="46" class="label-container"></rect>
<g class="label" transform="translate(0,0)">
<g transform="translate(-16,-13)">
<foreignobject width="32" height="26">
爸爸
</foreignobject>
</g>
</g>
</g>
<g class="node default" style="opacity: 1;" id="flowchart-C-59" transform="translate(136,175)">
<rect rx="5" ry="5" x="-26" y="-23" width="52" height="46" class="label-container"></rect>
<g class="label" transform="translate(0,0)">
<g transform="translate(-16,-13)">
<foreignobject width="32" height="26">
叔叔
</foreignobject>
</g>
</g>
</g>
<g class="node default" style="opacity: 1;" id="flowchart-D-61" transform="translate(238,31)">
<rect rx="5" ry="5" x="-26" y="-23" width="52" height="46" class="label-container"></rect>
<g class="label" transform="translate(0,0)">
<g transform="translate(-16,-13)">
<foreignobject width="32" height="26">
大郎
</foreignobject>
</g>
</g>
</g>
<g class="node default" style="opacity: 1;" id="flowchart-E-63" transform="translate(238,127)">
<rect rx="5" ry="5" x="-26" y="-23" width="52" height="46" class="label-container"></rect>
<g class="label" transform="translate(0,0)">
<g transform="translate(-16,-13)">
<foreignobject width="32" height="26">
二郎
</foreignobject>
</g>
</g>
</g>
</g>
1
2
3
4
5
6
graph LR;
A(爷爷)-->B(爸爸);
A-->C(叔叔);
B-->D(大郎);
B-->E(二郎);
4、复选框
todo-list ： - [x/X]和 - [ ]
1
2
3
- [x] 选中状态
- [ ] 未选中状态
5、Markdown 数学公式
六、快捷键
加粗 Ctrl + B
原文地址：https://blog.csdn.net/weixin_64210950/article/details/126829546?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168905574616800186581319%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=168905574616800186581319&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-6-126829546-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=markdown
评论
登录后即可评论
分享你的想法，与作者互动
暂无评论