MarkDown基础及表格、KaTeX公式、矩阵、流程图、UML图、甘特图语法

概述

最多可设置6级标题

技巧

列表

有序列表

MD语法：

1. 你好
2. 我也好

呈现效果：

1. 你好
2. 我也好

无序列表

MD语法：

- a
- b
* aa
* bb
+ aaa
+ bbb

效果：

• a
• b

• aa
• bb

• aaa
• bbb

结论，支持三种方式：-、*、+

TODO列表

MD语法：

- [x] 后端接口开发
- [ ] 与前端联调

呈现效果：

• 后端接口开发
• 与前端联调

加粗斜体与删除线

MD语法：

*斜体*，_斜体1_，**加粗**，__加粗1__，***粗斜体***，**_粗斜体1_**，~~删除线~~ 

效果：
斜体 ，斜体1 ，加粗 ，加粗1 ，粗斜体 ，粗斜体1 ，删除线

结论：一个*或_表示斜体，两个*或_表示加粗，三个*或_表示加粗斜体。

分割线

单独一行里输入3个或以上的短横线-、星号*或下划线_。

引用、嵌套引用

一个>表示引用，两个>表示嵌套引用

效果：

鲁迅：我不见他，已是三十多年；今天见了，精神分外爽快。才知道以前的三十多年，全是发昏；然而须十分小心。不然，那赵家的狗，何以看我两眼呢？

嵌套引用

超链接

支持类HTML方式：
<a href="http_url" alt="提示文本">超链接1</a>

效果：超链接1

[超链接2](http_url "alt 提示")

效果：超链接2

表格

设置表格内容对齐

MD语法：

| 左对齐标题 | 右对齐标题 | 居中对齐标题 | 居中对齐标题
| :------| ------: | :------: | --
| 短文本 | 中等长度文本 | 稍微长一点的文本 | 稍微长一点的文本
| 稍微长一点的文本 | 短文本 | 中等文本 | 中等文本

效果

左对齐标题	右对齐标题	居中对齐标题	居中对齐标题
短文本	中等长度文本	稍微长一点的文本	稍微长一点的文本
稍微长一点的文本	短文本	中等文本	中等文本

也就是说：两个横杠--即可代表一个列，默认是居中，故两侧的冒号:可以省略。冒号:加在左边，即表示左对齐；冒号加在右边，即表示右对齐。

设置表格内容换行

MD语法：

标题 | 我想要这个注释居中
:--|--
我想要这个标题左对齐 | 第一行<br>第二行

效果

标题	我想要这个注释居中
我想要这个标题左对齐	第一行 第二行

结论：<br>可以实现换行

设置表格内容合并

MD语法：

标题左对齐 | 我想要这个右对齐
:--|--:
合并的标题|第一行<hr>第二行

效果

标题左对齐	我想要这个居中对齐	我想要这个右对齐
合并的标题	第一行第一列 *** ** * ** *** 第二行第一列	第一行第二列 *** ** * ** *** 有很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多第二行第二列

结论：<hr>可以实现其他列合并

但是比较丑！尤其是在表格内容长度不一的情况下。

表格里含有特殊字符

表格以|作为分隔符，那如果我想要在表格单元格里面添加|，如何实现？加上转义字符\即可。其他特殊字符也是一样的处理方式。

MD语法：

模式|解释
--|--
`p1\|p2`|交替匹配任意 p1 或 p2

效果

模式	解释
`p1	p2`

公式

Markdown Preview Enhanced使用KaTeX或MathJax来渲染数学表达式。KaTeX比MathJax性能更好，但却缺少很多MathJax拥有的特性。

两种公式编写方式：

• $...$或\(...\)中的数学表达式将会在行内显示
• $$...$$或\[...\]或```math中的数学表达式将会在块内显示

常用符号

下标：$a_{11}$，呈现效果： a 11 a_{11} a11

上标：$a^{11}$，呈现效果： a 12 a^{12} a12

分数：$\frac{a}{b}$，呈现效果 a b \frac{a}{b} ba

向量：$\vec{a}$，呈现效果： a ⃗ \vec{a} a

累加：$\sum$，呈现效果： ∑ \sum ∑

累积：$\prod$，呈现效果： ∏ \prod ∏

无穷大：$\infty$，呈现效果： ∞ \infty ∞

1重积分：$\int\frac{dx}{1+x^2}=arctanx+C$，呈现效果： ∫ d x 1 + x 2 = a r c t a n x + C \int\frac{dx}{1+x^2}=arctanx+C ∫1+x2dx=arctanx+C

2重积分：$\iint$，呈现效果： ∬ \iint ∬

3重积分：$\iiint$，呈现效果： ∭ \iiint ∭

微分：

希腊字母

字母	markdown语法	呈现效果
alpha	$\alpha$	α \alpha α
beta	$\beta$	β \beta β
gamma	$\gamma$	γ \gamma γ
delta	$\delta$	δ \delta δ
epsilon	$\epsilon$	ϵ \epsilon ϵ
zeta	$\zeta$	ζ \zeta ζ
eta	$\eta$	η \eta η
theta	$\theta$	θ \theta θ
lambda	$\lambda$	λ \lambda λ
pi	$\pi$	π \pi π
omega	$\omega$	ω \omega ω
psi	$\psi$	ψ \psi ψ
sigma	$\sigma$	σ \sigma σ
rho	$\rho$	ρ \rho ρ
xi	$\xi$	ξ \xi ξ
tau	$\tau$	τ \tau τ
kappa	$\kappa$	κ \kappa κ
mu	$\mu$	μ \mu μ
nu	$\nu$	ν \nu ν
chi	$\chi$	χ \chi χ
upsilon	$\upsilon$	υ \upsilon υ

实战

实例语法：

呈现效果：
( 1 + x ) a (1+x)^a (1+x)a

方程组

起始、结束处以{cases}声明

示例：

$$\begin{cases}
a_1x+b_1y+c_1z=d_1\\
a_2x+b_2y+c_2z=d_2\\
a_3x+b_3y+c_3z=d_3\\
\end{cases}
$$

呈现效果：
{ a 1 x + b 1 y + c 1 z = d 1 a 2 x + b 2 y + c 2 z = d 2 a 3 x + b 3 y + c 3 z = d 3 \begin{cases} a_1x+b_1y+c_1z=d_1\\ a_2x+b_2y+c_2z=d_2\\ a_3x+b_3y+c_3z=d_3\\ \end{cases} ⎩ ⎨ ⎧a1x+b1y+c1z=d1a2x+b2y+c2z=d2a3x+b3y+c3z=d3

矩阵

基础

矩阵MD语法规则：

• 数学公式（包括矩阵）放在$$之间
• 起始标记\begin{matrix}，结束标记\end{matrix}
• 行尾标记\\，行间元素用&分隔

示例语法：

$$\begin{matrix}
0.8&0.2\\
0.4&0.6\\
\end{matrix}$$

呈现效果：
0.8 0.2 0.4 0.6 \begin{matrix} 0.8&0.2\\ 0.4&0.6\\ \end{matrix} 0.80.40.20.6

矩阵边框

上面的预览没有边框。在起始、结束标记用下列词替换matrix：

• pmatrix：小括号边框
• bmatrix：中括号边框
• Bmatrix：大括号边框
• vmatrix：单竖线边框
• Vmatrix：双竖线边框

呈现效果：

0.8 0.2 0.4 0.6 \] \\begin{bmatrix} 0.8\&0.2\\\\ 0.4\&0.6\\\\ \\end{bmatrix} \[0.80.40.20.6

省略元素

当矩阵元素较多且呈现一定规律时会使用省略号：

• 横省略号：\cdots
• 竖省略号：\vdots
• 斜省略号：\ddots

示例：

$$A=\begin{Bmatrix}
{a_{11}}&{a_{12}}&{\cdots}&{a_{1n}}\\
{a_{21}}&{a_{22}}&{\cdots}&{a_{2n}}\\
{\vdots}&{\vdots}&{\ddots}&{\vdots}\\
{a_{m1}}&{a_{m2}}&{\cdots}&{a_{mn}}\\
\end{Bmatrix}$$

呈现效果：
A = { a 11 a 12 ⋯ a 1 n a 21 a 22 ⋯ a 2 n ⋮ ⋮ ⋱ ⋮ a m 1 a m 2 ⋯ a m n } A=\begin{Bmatrix} {a_{11}}&{a_{12}}&{\cdots}&{a_{1n}}\\ {a_{21}}&{a_{22}}&{\cdots}&{a_{2n}}\\ {\vdots}&{\vdots}&{\ddots}&{\vdots}\\ {a_{m1}}&{a_{m2}}&{\cdots}&{a_{mn}}\\ \end{Bmatrix} A=⎩ ⎨ ⎧a11a21⋮am1a12a22⋮am2⋯⋯⋱⋯a1na2n⋮amn⎭ ⎬ ⎫

阵列

规则：

• 包含：起始、结束处以{array}声明
• 对齐方式：在{array}后以{}逐行统一声明
• 左对齐：l；居中：c；右对齐：r
• 竖直线：在声明对齐方式时，插入|建立竖直线
• 插入水平线：\hline

示例：

$$\begin{array}{c|lll}
{↓}&{a}&{b}&{c}\\
\hline
{R_1}&{c}&{b}&{a}\\
{R_2}&{b}&{c}&{c}\\
\end{array}$$

呈现效果：
↓ a b c R 1 c b a R 2 b c c \begin{array}{c|lll} {↓}&{a}&{b}&{c}\\ \hline {R_1}&{c}&{b}&{a}\\ {R_2}&{b}&{c}&{c}\\ \end{array} ↓R1R2acbbbccac

流程图

横向流程图

复制下面代码时去掉【晕】字，下同：

```mermaid
graph LR
A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]
F[横向流程图]
晕```

呈现效果：
a=1 a=2 方形 圆角 条件a 结果1 结果2 横向流程图

竖向流程图

```mermaid
graph TD
A[方形] --> B(圆角)
B --> C{条件a}
C --> |a=1| D[结果1]
C --> |a=2| E[结果2]
F[竖向流程图]
晕```

呈现效果：
a=1 a=2 方形 圆角 条件a 结果1 结果2 竖向流程图

标准流程图

示例：

```mermaid
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
晕```

呈现效果：
Created with Raphaël 2.3.0 开始框 处理框 判断框(是或否?) 输入输出框 结束框 子流程 yes no

UML时序图

示例：

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

呈现效果：
对象A 对象B 对象B你好吗?（请求） 对象B的描述 对象A的描述(提示) 我很好(响应) 你真的好吗？ 对象A 对象B 标题：复杂UML时序图

稍微复杂一点的时序图示例：

```mermaid
sequenceDiagram
Title: 标题：复杂UML时序图
对象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: 没人陪我玩
晕```

呈现效果：
对象A 对象B 小三 C 对象B你好吗?（请求） 对象B的描述 对象A的描述(提示) 我很好(响应) 你好吗 对象B找我了 你真的好吗？ 我们是朋友 没人陪我玩 对象A 对象B 小三 C 标题：复杂UML时序图

甘特图

示例：

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

呈现效果：
2023-11-07 2023-11-09 2023-11-11 2023-11-13 2023-11-15 2023-11-17 2023-11-19 2023-11-21 2023-11-23 需求 学习准备理解需求 原型 UI设计 设计框架 开发 未来任务 未来任务 功能测试 压力测试 测试报告 耍 设计 开发 测试 软件开发甘特图示例

参考

• KaTeX-GitHub
• KaTeX
• MathJax-GitHub
• MathJax