一、标题
为了使段落展示的更加清晰,Markdown中设置了多级标题的表达形式,级别用#来表示,几个#就表示几级标题,代码形式如下:
注意#后面要有一个空格
# 一级标题 ## 二级标题 ### 三级标题
示例如下:
一级标题
二级标题
三级标题
二、字体
Markdown中提供了如下几种常用的字体格式。
斜体
*斜体* _斜体_
斜体
斜体
粗体
**粗体** __粗体__
粗体
粗体
粗斜体
***粗斜体*** ___粗斜体___
粗斜体
粗斜体
删除线
~~删除线~~
删除线
分割线
*** ---
脚注
[^脚注]
除了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$$
四、图片与表格
Markdown在提供了控制图片添加大小、位置的方法。
MD添加图片(传统方式)
![alt 属性文本](图片地址)
使用img添加图片
使用img添加图片的时候,width用于控制宽度,height用于控制高度,div align用于控制位置(left、center、right)
<img src="https://img-home.csdnimg.cn/images/20201124032511.png" 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 ```
UML时序图
```mermaid sequenceDiagram 二哥->>女神: 你好吗?(请求) Note right of 女神: 女神的答复 Note left of 二哥: 二哥在等待回复 女神-->>二哥: 我很好,什么事?(响应) 二哥->>女神: 今天天气不错 女神-->>二哥:下雨呢,滚! ```
UML时序图
```mermaid %% 时序图例子,-> 直线,-->虚线,->>实线箭头 sequenceDiagram participant 二哥 participant 三哥 二哥->>四弟: 中午吃啥? loop 吃啥呢? 三哥->三哥: ***** end Note right of 二哥: 烤肉 火锅 <br/>麻辣烫... 三哥->>二哥: 你说吃啥! 二哥-->>三哥:你想 四弟->>三哥: 三哥吃啥? 三哥-->>四弟: 不知道! ```
甘特图
```mermaid %% 语法示例 gantt dateFormat YYYY-MM-DD title 软件开发甘特图 section 设计 需求:done, des1, 2021-09-01,2021-09-03 原型:active, des2, 2021-09-05, 2d UI设计:des3, after des2, 5d 未来任务:des4, after des3, 5d section 开发 准备:crit, done, 2021-09-01,24h 设计框架:crit, done, after des2, 2d 开发:crit, active, 3d 补充:crit, 5d section 测试 功能测试:active, a1, after des3, 3d 压力测试:after a1 , 20h 测试报告: 48h ```
Typora中的显示如下: