MarkDown进阶用法

前言

对于常规的排版问题，MarkDown给出了简单的解决方案，但是如果我们希望能够做出顺序图/时序图或者相关流程图，又或者数学相关工作者希望的相关数学公式显示问题又怎么解决呢？

学习此部分，需要掌握一定的MarkDown基础

本部分内容为个人经验总结

本篇最后更新于 时间 ，部分内容可能与现在不符，请自行判断

——生命的意义不在于躲避风雨，而是在雨中起舞♬

转义字符

如果在使用过程中，用户想要输入类似于 * 的等已经有相关意义的字符怎么办？这个时候就需要使用转义字符来表示你要单独使用该字符了，告诉编译器不要翻译成markdown格式了。
MarkDown支持在下面的字符前插入反斜杠(\)来实现转义。

1
2
3
4
5
6
7
8
9
10
11
12
\   反斜线
`   反引号
*   星号
_   下划线
{}  花括号
[]  方括号
()  小括号
#   井字号
+   加号
-   减号
.   英文句点
!   感叹号

脚注

创建脚注格式类似这样 [^Markdown]。

[^Markdown]: MarkDown – Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯（英语：John Gruber）。 它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档。

注：脚注可能在部分Markdown解析中不适用

LaTeX数学公式语言(Markdown支持的)

常用的数学公式表示方法：

  • 行中数学公式
    在MarkDown中一般使用两个 $这里写公式$ 来表示数学公式的区域，例如：

    1
    $2x+y=12$

    显示的效果如下：$2x+y=12$

  • 独立数学公式
    如果采用两个 $$这里写公式$$，则是公式单独占用行，还是上面的例子，展示效果如下：$$2x+y=12$$

  • 独立带编号的数学公式
    代码如下:

    1
    $\begin{equation}数学公式\end{equation}$

    $\begin{equation}数学公式\end{equation}$

常用的命令字符

  • 字号转换
    改变数学公式展示的字号大小，代码示例： 
    1
    2
    3
    $\Huge 这是一号字体$
    $\huge 这是二号字体$
    $\LARGE 这是三号字体$
  • 常用数学符号
    符号 实现 意义
    ≤ \leq 小于等于
    ≥ \geq 大于等于
    ≪ \ll 远小于
    ≫ \gg 远大于
    × \times 乘号
    ÷ \div 除号
    ≠ \neq 不等于号
  • 常用希腊字符
    符号 实现
    α \alpha
    β \beta
    θ \theta
    π \pi
  • 常用公式
    公式 实现 说明
    $log_xy$ log_x y _表示下标，如果如左边写，默认第一个是下标内容
    $log_{x+1} 3y+1$ log_{x+1} 3y+1 _{}在花括号里写的公式会呈现在下标，花括号外面的则默认真数
    $x^n$ x^n 同样的可以使用^{}，在花括号里写的公式会默认在次方里显示
    $\sqrt {x + y}$ \sqrt {x + y} \sqrt{}花括号里的公式会展示成开平方
    $\frac{x}{y}$ \frac{x}{y} \frac{}{}第一个括号内的公式为分子，第二个括号的内容为分母
    $\sum\limits_{x = 1}^{n} 7x$ \sum\limits_{x = 1}^{n} 7x \sum\limits_{}^{} 占位符，第一个花括号是下面的公式，第二个花括号是和，第三个占位符的位置是后缀的公式
    $\int_{0}^{\frac{\pi}{2}} \sin(x)$ \int_{0}^{\frac{\pi}{2}} \sin(x) 如左边公式所示

流程图

横向流程图

代码示例：

1
2
3
4
5
6
7
```mermaid
graph LR
A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[横向流程图]
1
2
3
4
5
6
7
8
9
10
11

> 注：代码前面存在一个制表位(`Tab`)来防止被转义为图形，下面同理

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

纵向流程图

代码示例：

1
2
3
4
5
6
7
```mermaid
graph TD
A[方形] --> B(圆角)
    B --> C{条件a}
    C --> |a=1| D[结果1]
    C --> |a=2| E[结果2]
    F[竖向流程图]
1
2
3
4
5
6
7
8
展示效果：
```mermaid
graph TD
A[方形] --> B(圆角)
    B --> C{条件a}
    C --> |a=1| D[结果1]
    C --> |a=2| E[结果2]
    F[竖向流程图]

标准流程图（纵向）

代码示例：

1
2
3
4
5
6
7
8
9
10
```flow
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
1
2
3
4
5
6
7
8
9
10
11
展示效果：
```flow
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op

标准流程图（横向）

代码示例：

1
2
3
4
5
6
7
8
9
10
```flow
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
1
2
3
4
5
6
7
8
9
10
11
展示效果：
```flow
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

其他图

其他图的设计例如：UML图，甘特图等，一般情况下专业的MarkDown才会支持，一般的MarkDown对于上面的流程图支持已是最大限度了。大多数情况下，使用MarkDown来直接绘制流程图远远不如使用相关软件工具绘制插入图片来的更加方便。

如果真的必要且感兴趣，详情查询相关书籍或者其他教程