本文部分操作有多个语法可实现,但有些语法兼容性太差,在部分Markdown编辑器中不会生效,因此不做讲解。
一、基础语法
1.1 标题
-
“#”:标题1。
-
“##”:标题2。
-
“###”:标题3。
-
“####”:标题4。
-
“#####”:标题5。
-
“######”:标题6。
1.2 段落
使用“空行”分隔一行或多行文本(有些编辑器不加空行,直接换行也会识别成段落,但不规范)。
注意:不应使用空格或制表符缩进段落。因为使用空格缩进后,4个空格会变成<pre> <code>标签。
1.3 换行
“两个或多个空格 + 回车”。
注意:不接空格直接回车,不会换行,会将换行符转换为一个空格。
1.4 加粗
内容之前与之后各添加两个星号(**)。
1.5 斜体
内容之前与之后各添加一个星号(*)。
1.6 粗体+斜体
内容之前与之后各添加三个星号(***)。
1.7 引用
在内容之前添加一个大于号(>)。相当于HTML元素中的<blockquote>。
该语法可嵌套使用,即在内容中可添加两、三、四、…个大于号(>),表示引用中再引用。
在HTML页面中效果为缩进4个字符。
1.8 有序列表
在内容之前添加“数字 + 英文句号”。
该语法可嵌套使用,即在内容中可继续添加“数字 + 英文句号”。
注意:
-
有序列表中不要添加标题语法(官方不支持),有些编辑器不支持。
-
若要在有序列表中添加其他语法,需在换行后的语法前添加2-5个空格(建议4个),这样才能保持有序列表的连续性。空格不要添加太多,不然其他语法不会生效。
1.9 无序列表
在内容之前添加一个减号(-)或星号(*)或加号(+)。
该语法可嵌套使用,即在内容中可继续添加减号(-)或星号(*)或加号(+)。
注意:
-
无序列表中不要添加标题语法(官方不支持),有些编辑器不支持。
-
建议使用加号(+)或减号(-),不要使用星号(*),因为星号(*)会与其他操作语法混淆,不易阅读。
-
若要在无序列表中添加其他语法,需在换行后的语法前添加2-5个空格(建议4个),这样才能保持无序列表的连续性。空格不要添加太多,不然其他语法不会生效。
1.10 代码
在内容之前与之后各添加一个或两个反单引号(`)。
注意:
-
在一个或两个反单引号(`)之间若要添加一个不生效的反单引号(`),则需添加两个或一个反单引号(`)即可。
-
在生效的反单引号(`)旁边,谨慎添加不生效的反单引号(`),避免识别混乱。
1.11 代码块
在内容之前与之后各添加三个反单引号(`)。
在内容之前的那三个反单引号(`)后面添加代码语言名称,可实现代码高亮。
1.12 水平线
添加三个及以上星号(*)或短划线(-)或下划线(_)。
注意:使用星号(*)或下划线(_),会与其他操作语法混淆,不易阅读。使用短划线(-)也一样【有些编辑器支持“内容+换行+多个短划线”,生成标题2,此时可使用“内容+空行+多个短划线”解决】。
1.13 链接
-
“[链接文字或图片](网址+空格+“标题”)”,其中”空格+标题“为可选项。”标题“为鼠标悬浮其上时显示的内容。
-
[链接文字或图片][标签]
空行
[标签]:+空格+网址+空格+“标题”,
注意:
-
其中”空格+标题“为可选项。”标题“为鼠标悬浮其上时显示的内容。
-
标签不区分大小写,可以包括字母、数字、空格或标点符号。
用途:
-
网址提取出来可重复使用。
-
将”[标签]:+空格+网址+空格+“标题”“放置于文档末尾,”[链接文字][标签]“放置于段落中,避免因网址过长影响阅读。
-
-
<网址>,可快速将网址转换为链接。部分编辑器可不加尖括号转换,但这不符合官方定义。
注意:由于许多编辑器直接输入URL也会默认转换为链接,因此若要使该链接仅以字符串形式显示,可在URL前后各添加一个反单引号(`)。
注意:若网站中包含括号等内容时,需加上反斜杠(\)取消其语法功能。否则部分编辑器会识别错误。
1.14 图片
-
”“,类似于链接,区别在于前面有一个感叹号。
注意:
-
若图片无法显示,则显示链接文字。
-
鼠标悬浮图片上时,显示标题。
-
部分编辑器不支持绝对路径(如VSCode),此时可使用相对路径。
-
-
[](网址+空格+“标题”),此时点击该图片即可打开对应网址。
注意:若要更改图片大小、位置等参数,则只能使用
<img title="" src="" alt="" width="" data-align="左/中/右">标签。其中tltle属性对应标题,alt属性对应链接文字,src属性对应图片地址。 -
![链接文字][标签]
空行
[标签]:+空格+图片地址+空格+“标题”,
1.15 转义符
在字符前添加反斜杠(\)。
二、扩展语法
2.1 删除线
在内容之前与之后各添加两个波浪号(~~)。
2.2 表格
语法:三个及以上连字符(---)来创建每个列的标题,用竖线(|)分隔每个列。
格式:第一行是标题,对应<thead>,第二行写连字符(---)。竖线数量保持一致。
总结:以第二行为核心,通过竖线(|)绘制表格。
|标题1|标题2|标题3|
|----|----|----|
|文本1|文本2|文本3|
|文本4|文本5|文本6|
竖线与竖线之间可随意添加空格来控制文本对齐,因为空格在表格中不显示。
在第二行写连字符(---)前后添加冒号(:)可实现居左、中、右的对齐。
“|:---|”整列居左对齐(可不添加,因为居左对齐为默认对齐方式)。
“|:---:|”整列居中对齐。
“|---:|”整列居右对齐。
注意:冒号(:)与连字符(---)之间不能有空格。
注意:
-
由于markdown规范限制,无法实现跨行跨列的操作。
-
表格内可添加链接、代码、重点等,但不可添加多行代码块(一行代码块可以,但官方不支持)、标题、块引用、列表【有序、无序等】、水平规则【即水平线】、HTML标记、图像(图像可以,但官方不支持)。
2.3 脚注(Footnotes)
[^标识符]
空行
[^标识符]:脚注内容
注意:
-
冒号与脚注内容之间可不加空格。
-
标识符可以是数字或单词,但不能包含空格或制表符。
-
标识符的作用仅仅是将脚注引用与脚注本身相关联。实际效果中,脚注是按照其出现的先后顺序依次编号为1,2,3,…。
-
部分编辑器不支持脚注,还有部分编辑器会把脚注转换为链接。
2.4 链接标题ID(锚点)
-
标题(#/##/###/...) {#标题ID}或者<a id="标题ID"></a> [链接名称](#标题ID) 此时点击链接名称,将会自动跳转到包含该标题ID的标题位置。 标题与花括号之间可无空格。 除了使用a标签外,还可使用其他任意HTML元素。 {#标题ID}相当于HTML标签中的<h1或h2... id="标题ID"></h1或h2...>。 -
<a id="标题ID" href="...">......</a> 空行 [链接名称](#标题ID) 此时点击链接名称,将会自动跳转到包含该标题ID的链接位置(不触发链接)。 除了使用a标签外,还可使用其他任意HTML元素。
注意:仅部分编辑器支持语法{#标题ID},但绝大部分编辑器支持语法<a id="标题ID"></a>。怎么用自己看着办。
用途:制作目录和文档大纲。点击目录中的链接,即可跳转至对应标题。
2.5 定义列表
-
标题1
-
定义1
-
定义2
空行
-
标题2
-
定义3
-
定义4
…
相当于HTML元素中的
<dl>
<dt>标题1</dt>
<dd>定义1</dd>
......
</dl>
注意:
-
冒号与定义之间有一个空格。
-
仅部分编辑器支持,因此该语法慎用。
2.6 任务列表(复选框)
减号(-)/加号(+)/星号(*)+一个空格+左中括号([)+一个空格/字符X+右中括号+一个空格+内容。
eg:- [ ] 内容。
-
中括号内加空格,表示复选框未选中,加字符X,表示复选框已选中。
-
字符X不区分大小写。
注意:虽然减号(-)、加号(+)、星号(*)都可以,但官方要求使用减号(-)。
2.7 图表
Mermaid 是最流行的 Markdown 图表工具之一,它允许你使用简单的文本语法生成各种图表。
-
流程图 (Flowchart)
-
时序图 (Sequence Diagram)
-
类图 (Class Diagram)
-
状态图 (State Diagram)
-
甘特图 (Gantt Chart)
-
饼图 (Pie Chart)
2.7.1 流程图
-
流程图方向
-
TD或TB:从上到下。 -
BT:从下到上。 -
RL:从右到左。 -
LR:从左到右。
-
-
节点形状
-
A[方形]:矩形。 -
B(圆角矩形):圆角矩形。 -
C{菱形}:菱形(决策)。 -
D((圆形)):圆形。 -
E>旗帜形]:旗帜形。
-
-
连接线类型
-
-->:实线箭头。 -
-.->:虚线箭头。 -
==>:粗实线箭头。 -
--:实线。 -
-.:虚线。
-
graph TD
A[开始] --> B{条件判断}
B -->|Yes| C[执行操作A]
B -->|No| D[执行操作B]
C --> E[结束]
D --> E>旗帜形状]
2.7.2 时序图
-
participant: 定义参与者。 -
->>: 实线箭头。 -
-->>: 虚线箭头。 -
note: 添加注释。
sequenceDiagram
participant A as 用户
participant B as 系统
participant C as 数据库
A->>B: 登录请求
B->>C: 验证用户信息
C-->>B: 返回验证结果
B-->>A: 登录成功/失败
2.7.3 类图
连接线类型:
classA --|> classB : 继承
classC --* classD : 组成
classE --o classF : 集合
classG --> classH : 关联
classI -- classJ : 实线连接
classK ..> classL : 依赖
classM ..|> classN : 实现
classO .. classP : 虚线连接
classDiagram
class 用户 {
+用户名: string
+密码: string
+登录()
}
class 订单 {
+订单号: int
+创建日期: date
+计算总价()
}
用户 "1" --> "n" 订单
2.7.4 甘特图
-
title:设置标题。 -
dateFormat:定义日期格式。 -
section:定义阶段。 -
done(已完成)、active(进行中)、crit(关键):任务状态。
gantt
title 项目开发计划
dateFormat YYYY-MM-DD
section 设计阶段
需求分析 :done, des1, 2024-01-01,2024-01-15
UI设计 :crit, des2, 2024-01-10, 30d
section 开发阶段
前端开发 :active, dev1, after des2, 45d
后端开发 : dev2, 2024-02-01, 60d
section 测试阶段
单元测试 : test1, after dev1, 15d
集成测试 : test2, after dev2, 10d
2.7.5 饼图
pie
title 浏览器市场份额
"Chrome" : 65
"Safari" : 15
"Firefox" : 10
"其他" : 10
2.7.6 状态图
- 使用“状态 ID + 冒号”的方式简化状态节点的声明。
stateDiagram
状态1 : 状态1的文字描述
- 转换在状态图中表现为连接两个状态节点的单向箭头,语法为“字符箭头
-->”。
stateDiagram
状态1 --> 状态2
- 通过
(行内容):label的形式,为转换添加描述文本。
stateDiagram
状态1 --> 状态2: 咻~
- 状态图中有两个特殊的状态节点:开始节点和结束节点。如果需要在状态图中显示开始或结束节点,可以通过
[*]方式声明。
stateDiagram
[*] --> 状态节点
状态节点 --> [*]
- 在负责的状态描述中,有的状态节点会包含一系列的子状态,我们可以用组合嵌套的方式来描绘它们。语法是“花括号
{},描述子状态。
stateDiagram
[*] --> 父状态节点
state 父状态节点 {
[*] --> 子状态节点
子状态节点 --> [*]
}
- 对于非单一结果的状态转换,我们可以使用
<>和<>标签实现分支。
stateDiagram
state 分支 <>
[*] --> 分支
分支 --> 分支2
分支 --> 分支3
state 合并 <>
分支2 --> 合并
分支3 --> 合并
合并 --> 状态4
状态4 --> [*]
- 对于一些同步完成的状态转换,我们可以用
--符号声明并行效果。
stateDiagram
[*] --> 激活状态
state 激活状态 {
[*] --> NumLock关
NumLock关 --> NumLock开 : 按下 NumLock 键
NumLock开 --> NumLock关 : 按下 NumLock 键
--
[*] --> CapsLock关
CapsLock关 --> CapsLock开 : 按下 CapsLock 键
CapsLock开 --> CapsLock关 : 按下 CapsLock 键
--
[*] --> ScrollLock关
ScrollLock关 --> ScrollLock开 : 按下 ScrollLock 键
ScrollLock开 --> ScrollLock关 : 按下 ScrollLock 键
}
- 有时候图表元素不能完全表达我们的设计思路,这时候需要在图中加入文字描述。使用
note left/right of 备注内容 end note的方式或note left/right of 状态名 : 备注内容,将备注添加到状态节点的左/右侧。
stateDiagram
状态1 --> 状态2
状态1 : 描述将出现在右侧
note right of 状态1
这里添加描述内容
end note
note left of 状态2 : 在节点左侧添加描述
2.8 数学公式
2.8.1 行中公式
在公式之前和之后各添加一个美元符($)。
$1 + 1 = 2$
2.8.2 独立公式
在公式之前和之后各添加两个美元符 ($$),换行通过在行尾添加 \\ 实现。
$$
x + y = 10 \\\\
x - y = 6 \\\\
2x = 16 \\\\
x = 8 \\\\
y = 2
$$
2.8.3 运算符号
-
加号:+。
-
减号:-。
-
加减号:\pm。
-
减加号:\mp。
-
叉乘号:\times。
-
点乘号:\cdot。
-
星乘号:\ast。
-
除法:\div。
-
斜除号:/。
-
绝对值:|公式|。
-
分式:
-
\frac{分子}{分母}。
-
{分子} \over {分母}。
-
2.8.4 上、下标
上标符号:”^“。$x^2$
下标符号:”_“。$y_1$
组合符号:”{公式}“。$a^{x^{2}+y^{2}}$

8910

被折叠的 条评论
为什么被折叠?



