Markdown骚操作｜字体颜色字体背景流程图一网打尽建议收藏
Posted 二哥不像程序员
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Markdown骚操作｜字体颜色字体背景流程图一网打尽建议收藏相关的知识，希望对你有一定的参考价值。
本文二哥带领大家来学习一下Markdown文档编辑的那些高端操作。
- 推荐MD编辑器：Typora
注：除最后一个图外，均可用于CSDN Markdown！
注：文中代码块中给出书写格式，下方给出效果展示。
别犹豫了！先收藏吧！
一、标题
为了使段落展示的更加清晰，Markdown中设置了多级标题的表达形式，级别用#来表示，几个#就表示几级标题，代码形式如下：
注意#后面要有一个空格
# 一级标题
## 二级标题
### 三级标题
示例如下：
一级标题
二级标题
三级标题
二、字体
Markdown中提供了如下几种常用的字体格式。
斜体
*斜体*
_斜体_
斜体
斜体
粗体
**粗体**
__粗体__
粗体
粗体
粗斜体
***粗斜体***
___粗斜体___
粗斜体
粗斜体
删除线
~~删除线~~
删除线
分割线
***
---
脚注
[^脚注]
Typora展示如下：
除了markdown中自带的几种字体格式之外，我们还可以配合html代码进行字体的改变。
文本颜色
<font color="red">红色字体</font>
<font color="green">绿色字体</font>
<font color="blue">蓝色字体</font>
红色字体
绿色字体
蓝色字体
字体格式
<font face="黑体">黑体字</font>
黑体字
文本大小
<font size=5>5号字</font>
5号字
组合使用
<font color="red" face="黑体" size=5>别犹豫了！点赞吧！</font>
别犹豫了！点赞吧！
文本高亮显示
<mark>高亮显示</mark>
高亮显示
添加背景颜色
<table><tr><td bgcolor="yellow">搞点颜色</td></tr></table>
| 搞点颜色 |
文本注音
当我们遇到生僻字或者为了突出某个字的时候可以使用注音的方式。
<ruby>饕餮 <rt>tāo tiè</rt></ruby>
饕餮
下划线
<u>下划线</u>
下划线
三、列表和板块
为了使得排版更清晰，Markdown中提供了多种格式的列表和排版块供我们组合使用。
无序列表
注意符号后面要有一个空格
- 无序列表
* 无序列表
+ 无序列表
- 无序列表
- 无序列表
- 无序列表
有序列表
1. 第一项
2. 第二项
3. 第三项
- 第一项
- 第二项
- 第三项
嵌套列表
使用嵌套列表的时候需要在子列表的前面加上4个空格。
- 第一级
- 第二级
- 第一级
- 第二级
区块引用
> 外层区块
> > 第一层区块
> > > 第二层区块
外层区块
第一层区块
第二层区块
片段代码块
Markdown中提供了能够随时在文本中添加片段代码块的方法。字符为键盘左上角的按键`。
`hello World`
hello World
代码块
Markdown中的代码块可以匹配几乎类型的代码样式。在使用的时候我们可以选择指定（也可不指定）对应的语言。
```python
print('Hello World')
```
print('Hello World')
公式块
对于数学相关学者来说，通常需要编写数学公式，在Markdown可以使用$$来作为公式块，在其中进行Latex类型公式的输入。
$y=x^2+1$
$$y=x^2+1$$
y = x 2 + 1 y=x^2+1 y=x2+1
y = x 2 + 1 y=x^2+1 y=x2+1
四、图片与表格
Markdown在提供了控制图片添加大小、位置的方法。
MD添加图片（传统方式）
使用img添加图片
使用img添加图片的时候，width用于控制宽度，height用于控制高度，div align用于控制位置（left、center、right）
<img src="https://image.cha138.com/20210915/c33a0dc4b7d54e799df46a1121a533fd.jpg" width="400" height="192" div align=center>
添加表格
MD中添加表格的方式比较单一，添加表格的时候可以控制文字的对齐方式：
- -: 设置内容和标题栏居右对齐。
- :- 设置内容和标题栏居左对齐。
- :-: 设置内容和标题栏居中对齐。
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
| 左对齐 | 右对齐 | 居中对齐 |
|---|---|---|
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
添加链接
这是二哥的主页： [二哥不像程序员](https://blog.csdn.net/qq_35164554?spm=1000.2115.3001.5343)
这是二哥的主页： 二哥不像程序员
五、流程图
很多人觉得Markdown的缺点就在于无法绘图，其实我们可以使用多种代码的组合进行多个流程图的绘制，示例如下：
横向流程图
```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[竖向流程图]
```
纵向标准流程图
```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
```
横向标准流程图
```mermaid
flowchat
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
```