基础

markdown支持部分html语法, 下面提到的标题, 列表 ,表格等格式都可以通过html语法实现

标题

1
2
3
4
# 一号标题
## 二号标题
...
###### 六号标题

列表

1
2
3
- 无序列表
  - 二级无序列表(在上一级列表末尾回车后再按退格键删除一级列表后插入二级)
    - 三级无序列表(操作同上一级)

无序列表前面的符号可以是-, +, *, 但是尽量不要混用

  • 无序列表
    • 二级
      • 三级
1
1. 有序列表
  1. 有序列表

引用

1
> 引用内容

引用内容

代码块

1
2
3
```语言
print("hello world!")
```

python代码如下:

1
print("hello world!")

分割线

1
2
3
---
或者
***
 
1

链接

1
[链接显示的名称](链接)

ctrl加左键点击可以打开链接

百度

插入图片

1
![图片无法加载时显示的名称](图片链接,可以是相对路径也可以是绝对路径)

image-20241013222925065

进阶(LaTeX公式)

markdown支持部分$\LaTeX$语法, 通过$\LaTeX$可以在markdown中实现一些普通编辑器中难以实现的符号以及数学公式等

要使用$\LaTeX$内联公式,形式如下

1
$\LaTeX$

使用两个$符号包裹中间的latex代码即可

操作符

符号 代码 符号 代码 符号 代码
$\pm$ \pm $\mp$ \mp $\times$ \times
$\div$ \div $\cdot$ \cdot \ast \ast
$\star$ \star $\dagger$ \dagger $\ddagger$ \ddagger
$\amalg$ \amalg $\cap$ \cap $\cup$ \cup
$\uplus$ \uplus $\sqcap$ \sqcap $\sqcup$ \sqcup
$\vee$ \vee $\wedge$ \wedge $\oplus$ \oplus
$\ominus$ \ominus $\otimes$ \otimes $\circ$ \circ
$\bullet$ \bullet $ \diamond$ \diamond $\lhd$ \lhd
$\rhd$ \rhd $\unlhd$ \unlhd $\unrhd$ \unrhd
$\oslash$ \oslash $\odot$ \odot $\bigcirc$ \bigcirc
$\triangleleft$ \triangleleft $\Diamond$ \Diamond $\bigtriangleup$ \bigtriangleup
$ \bigtriangledown $\Box$ \Box $\triangleright$ \triangleright
$\setminus$ \setminus $\wr$ \wr $\sqrt{x}$ \sqrt{x}
$x^{\circ}$ x^{\circ} $\triangledown$ \triangledown $\sqrt[n]{x}$ \sqrt[n]{x}
$a^x$ a^x $a^{xyz}$ a^{xyz}

进阶(画图)

markdow代码块中的mermaid模块能够实现画图功能

简单流程图

1
2
3
graph LR
%%A指向B(两个百分号代表注释)
A-->B
graph LR
A-->tesxt---B

mermaid语法以graph标记开头, 后接图像的走向方向, 按照T: top, B: bottom, L: left, R: right, D: down

TB代表从上到下, LR代表从左到右, 以此类推

节点形状

1
节点名<形状符号>节点内容<形状符号>

不加形状符号时节点名就是节点内容, 形状为默认的文本节点(方形)

1
2
3
4
5
6
7
graph TB
默认节点
B[文本节点]
C(圆角节点)
D((圆形节点))
E>非对称节点]
F{菱形节点}
graph TB
默认节点
B[文本节点]
C(圆角节点)
D((圆形节点))
E>非对称节点]
F{菱形节点}

连线形状

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
箭头连接 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

标签写法还可以是下面的:(可能会更方便一点)
a -->|标签| b
a -.-> |标签| b
a ==>|标签| b
...
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 以此类推
正常 --- ---- -----
虚线 -.- -..- -..-
加粗 === ==== ===== 
graph TB
A-->B
C--->D
E---->F
G----->H

子图

mermaid支持子图, 即图和图之间相互包含

子图以subgraph开头, end结尾, 所有的节点都是全局的, 即不同子图的不同节点可以相互连接

1
2
3
4
5
graph LR

subgraph 子图名称
子图代码
end

使用 direction 设置子图方向

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
graph LR

subgraph g1
direction LR
a1-->b1
end

subgraph g2
direction LR
a2-->b2
end

subgraph g3
direction LR
a3-->b3
end

a3-->a2
graph LR

subgraph g1
direction LR
a1-->b1
end

subgraph g2
direction LR
a2-->b2
end

subgraph g3 
direction LR
a3-->b3
end

a3-->a2

时序图

时序图用来描述两个或更多模块之间的交互过程，markdown 也同样提供了绘制时序图的功能。

绘制时序图的关键字是 sequenceDiagram

模块声明

使用 participant 关键字声明一个模块, 模块声明的顺序决定时序图中展示的顺序

1
2
3
sequenceDiagram  
participant B
participant A
sequenceDiagram  
participant B
participant A

连线

sequenceDiagram  
participant server  
participant CA  
participant client  

server->>CA: 这是我的公钥  
CA-->>server: 下发证书  
server->client: 建立连接  
client->>server: 我要 RSA 算法加密的公钥  
server-->>client: 下发证书与公钥  
client-->>server: 上报通过公钥加密的随机数  
server->>server: 生成对称加密秘钥  
client-->server: 加密通信  
client-->server: 加密通信  
client-xserver: 关闭连接

饼图

1
2
3
4
5
pie 
title 标题
"类别名称": 数量
"类别名称": 数量
...

每个类别的占比会自动计算

pie 
title 一张饼图
"cat": 146
"dog": 231
"ko": 125

状态图

stateDiagram
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

甘特图

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d

section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison          :crit, done, after des1, 2d
Create tests for parser             :crit, active, 3d
Future task in critical line        :crit, 5d
Create tests for renderer           :2d
Add to mermaid                      :1d

section Documentation
Describe gantt syntax               :active, a1, after des1, 3d
Add gantt diagram to demo page      :after a1  , 20h
Add another diagram to demo page    :doc1, after a1  , 48h

section Last section
Describe gantt syntax               :after doc1, 3d
Add gantt diagram to demo page      : 20h
Add another diagram to demo page    : 48h