Markdown 进阶写作指南

原文转载于个人博客文章 Markdown 进阶写作指南

9个Markdown文档进阶写作技巧分享：

• 显示特殊符号
• 添加emoji表情符号🥰
• 添加字体字号
• 添加字体颜色和修改字体大小
• 添加文字背景色
• 添加 Todo 列表
• 添加常用数学公式
• 添加流程图和时序图
• 添加注意事项

显示特殊符号

• SYMBL - 特殊字符对应的Unicode码查询
• 语法符号，前面加反斜线\即可显示符号本身，例如：

\\ 反斜杠
\* 星号
\_ 下划线
\{\} 括号
\# 井号
\+ 加号
\- 减号
\! 感叹号

演示：

\ 反斜杠
* 星号
_ 下划线
{} 括号
# 井号
+ 加号
- 减号
! 感叹号

添加emoji表情符号🥰

• Emoji Cheat Sheet - 给你的Markdown文档添加表情🍁
• 去上面的网站即可复制粘贴，需要的表情包🤔

添加字体字号

有时侯我们需要修改文字的字体字号，可是我们就会简单的“加粗”“斜体”等，这样子一来又觉得有点单调。
其实我们可以用HTML代码来改变Markdown文档的字体字号：

• CSS字体 - 让你的Markdown文档有更多的字体
• 通过上面的网站查询到的字体名字 <font style="font-family:写入到这里"></font>

<font style="font-family: STKaiti;">我是华文楷体</font>
<font style="font-family: STCaiyun;">我是华文彩云体</font>
<font style="font-family: STXingkai;">我是华文行楷</font>

演示：

我是华文楷体

我是华文彩云体

我是华文行楷

添加字体颜色和修改字体大小

通过上面的学习你已经会使用HTML代码来改变Markdown文档的字体字号，同样Markdown文档也是可以通过HTML代码实现字体颜色：

• CSS颜色 - 让你的Markdown文档字体有更多的颜色
• 通过上面查询到的颜色编码 <font color="写入到这里" size="写入数值改变字体大小"></font>

<font color=LightSkyBlue size=72>亮天蓝色</font>
<font color=SpringGreen size=42>春绿色</font>
<font color=Red size=6>纯红色</font>

演示：

亮天蓝色

春绿色

纯红色

添加文字背景色

Markdown本身不支持背景色设置，需要采用内置html的方式实现。
借助 table, tr, td 等表格标签的 bgcolor 属性来实现背景色的功能。例如：

• CSS颜色 - 让你的Markdown文档字体有更多的颜色
• 通过上面查询到的颜色编码 <table><tr><td bgcolor="写入到这里"></td></tr></table>

<table><tr><td bgcolor=LightSkyBlue>背景色是：亮天蓝色</td></tr></table>
<table><tr><td bgcolor=SpringGreen>背景色是：春绿色</td></tr></table>
<table><tr><td bgcolor=Red>背景色是：纯红色</td></tr></table>

演示：

背景色是：亮天蓝色

背景色是：春绿色

背景色是：纯红色

添加 Todo 列表

• 使用 - [ ] 和 - [x] 语法可以创建复选框，实现 todo-list 等功能
• 输入顺序：- 空格 [ 空格 ] 空格

- [ ] 未选中状态
- [x] 选中状态

演示：

• 未选中状态

• 选中状态

添加常用数学公式

• 数学公式 - 让你的Markdown文档添加公式

• 公式块 ，输入美元符（$）然后回车，中间输入相应代码，详细代码参考上方网站。例如：

$$
\sin x =2  \sin x \cos
$$

$$
e^{i\pi} + 1 = 0
$$

$$
\begin{Bmatrix}
   a & b \\
   c & d
\end{Bmatrix}
$$

演示：

$$\sin x=2\sin x\cos$$

$$e^{i\pi }+1=0$$

$$\left\{\begin{array}{cc}a& b\\ c& d\end{array}\right\}$$

添加流程图和时序图

横向流程图

例如：

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

演示：

竖向流程图

例如：

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

演示：

UML时序图

例如：

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

演示：

UML复杂时序图

例如：

```mermaid
sequenceDiagram
Title: 标题：复杂使用
对象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: 没人陪我玩
```

演示：

添加注意事项

• 输入三个反单引号 ```再输入 notice 回车即可输入注意事项，例如：

```notice
这个是一个注意事项
```

演示：

这个是一个注意事项

---

往期文章推荐：

• 使用 Jekyll 在 GitHub 上搭建个人博客
• Markdown 博客写作指南

参考文章：

• Markdown - 菜鸟教程