markdown用法总结_markdown tags

markdown简介：

Markdown 是一种轻量级标记语言，便于我们使用简单的纯文本格式来编写格式化的文档。
Markdown 编写的文档可以导出PDF、Word、 HTML 、图片、Textile等多种格式的文档。

markdown编辑器

常用的markdown编辑器：Typora、Atom、Haroopad、SublimeText等，常用的云笔记里也可以创建markdown文件（有道云、印象笔记等），个人推荐Typora。

Markdown 段落

标题

​ 使用 # 号可表示 1-6 级标题，一级标题对应一个 # 号，二级标题对应两个 # 号，以此类推。

Typora快捷键：

Ctrl+1 ：一级标题

Ctrl+6 ：六级标题

字体

*斜体文本* 
**粗体文本**  
***粗斜体文本***  
1
2
3

效果：

斜体文本
粗体文本
粗斜体文本

分隔线

你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西：

***
- - -
--------
1
2
3

效果：

---

标记文本

要突出强调的文本两侧各加两个等号==。

例如：

Markdown 是一种轻量级==标记语言==。
1

效果：
Markdown 是一种轻量级标记语言。

删除线

文字两端分别加上两个波浪线：

~~删除线~~
1

删除线

下划线

通过 HTML 的 u 标签来实现：

<u>HTML的u标签可以实现带下划线的文本</u>
1

HTML的u标签可以实现带下划线的文本

脚注

脚注可以对文本的补充说明。
Markdown 脚注的格式如下:

[^要注明的文本]
1

座右铭¹

孔子曰²

Markdown 列表

Markdown 支持有序列表和无序列表。

无序列表

无序列表使用星号(*)、加号(+)或是减号(-)作为列表标记：

* 列表1
* 列表2
* 列表3
1
2
3

效果：

• 列表1
• 列表2
• 列表3

有序列表

有序列表使用数字并加上 . 号来表示：

1. 有序列表1
2. 有序列表2
3. 有序列表3
1
2
3

效果：

1. 有序列表1
2. 有序列表2
3. 有序列表3

列表嵌套

列表嵌套需在子列表中的选项添加四个空格即可：

1. 有序列表1
    * 嵌套的第一个元素
    * 嵌套的第二个元素
2.有序列表2
    * 嵌套的第一个元素
    * 嵌套的第二个元素
1
2
3
4
5
6

效果：

1. 有序列表1
   • 嵌套的第一个元素
   • 嵌套的第二个元素
2. 有序列表2
   • 嵌套的第一个元素
   • 嵌套的第二个元素

任务列表

-[ ]表示该项目未完成，- [x]表示该项目已完成。（-”与“[ ]”；“[ ]”与后面的文字 之间均需空一个空格）

例如：

- [x] 任务1
- [ ] 任务2
1
2

效果：

• 任务1
• 任务2

Markdown 区块

Markdown 区块引用是在段落开头使用 > 符号 ，然后后面紧跟一个空格符号：

> 区块引用
1

区块引用1
区块引用2

另外区块是可以嵌套的，一个 > 符号是最外层，两个>符号是第一层嵌套，以此类推退：

> 最外层1
> 最外层2
> > 第一层嵌套1
> > 第一层嵌套2
> > > 第二层嵌套1
> > > 第二层嵌套2
1
2
3
4
5
6

最外层1
最外层2

第一层嵌套1
第一层嵌套2

第二层嵌套1
第二层嵌套2

区块中使用列表

> 区块中使用列表
> 1. 第一项
> 2. 第二项
> * 第一项
> * 第二项
> * 第三项
1
2
3
4
5
6

区块中使用列表

1. 第一项
2. 第二项

• 第一项
• 第二项
• 第三项

列表中使用区块

* 第一项
    > 菜鸟教程
    > 技术成就梦想
* 第二项
1
2
3
4

• 第一项

  菜鸟教程
  技术成就梦想

• 第二项

Markdown 代码

如果是段落上的一个函数或片段的代码可以用反引号把它包起来（`），例如：

`BeanUtils.copyProperties(A,B)` 函数
1

BeanUtils.copyProperties(A,B) 函数

代码区块

代码区块使用 4 个空格或者一个制表符（Tab 键）。

function getIdSelections() {
return $.map($("#apkManageTable").bootstrapTable('getSelections'), function (row) {
    return row.id
});
} 
1
2
3
4
5

你也可以用 ```包裹一段代码，并指定一种语言（也可以不指定）：

    function getIdSelections() {
    return $.map($("#apkManageTable").bootstrapTable('getSelections'), function (row) {
        return row.id
    });
    }
1
2
3
4
5

Markdown 链接

[链接名称](链接地址)
或者
<链接地址>
1
2
3

菜鸟教程链接 菜鸟教程

有道翻译

https://www.runoob.com

高级链接

链接也可以用变量来代替，文档末尾附带变量地址：
这个链接用 firefoxchina_link 作为网址变量 [firefoxchina][firefoxchina_link]
然后在文档的结尾为变量赋值（网址）
  [firefoxchina_link]: http://home.firefoxchina.cn/
1
2
3
4

欢迎使用火狐浏览器 firefoxchina

Markdown 图片

Markdown 图片语法格式如下：

![alt 属性文本](图片地址)
![alt 属性文本](图片地址 "可选标题")
1
2

![alt 图标](https://img-blog.csdnimg.cn/20191122210441570.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjIzOTA4,size_16,color_FFFFFF,t_70 "被金钱蒙蔽了双眼")
1

Markdown 表格

markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行。
语法格式如下：

|  表头1  | 表头2 | 表头3 |
|  ----  | ----  |----  |
| 单元格  | 单元格 |单元格 |
| 单元格  | 单元格 |单元格 |
1
2
3
4

表格的对齐方式

我们可以设置表格的对齐方式：

-: 设置内容和标题栏居右对齐。
:- 设置内容和标题栏居左对齐。
:-: 设置内容和标题栏居中对齐。
1
2
3

| 左对齐 | 右对齐 | 居中对齐 |
| :- | -: | :-: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
1
2
3
4

Markdown 高级技巧

支持的 HTML 元素

不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。
目前支持的 HTML 元素有：<kbd> <b> <i> <em> <sup> <sub><br>等 ，如：

使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑
1

使用 Ctrl+Alt+Del 重启电脑

转义

Markdown使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdown 使用反斜杠转义特殊字符：

**文本加粗** 
\*\* 正常显示星号 \*\*
1
2

文本加粗
** 正常显示星号 **

Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：

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

公式

一般公式分为两种形式，行内公式和行间公式。

行内公式

​ 行内公式是在公式代码块的基础上前面加上$，后面加上 $ 组成的。

行间公式

​ 行间公式则是在公式代码块前后使用$$ 和$$ 。

参考： markdown中公式编辑教程

$ \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. $
$$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$$
1
2

$$\Gamma (z)={\int }_0^{\infty }{t}^{z-1}{e}^{-t}dt.$$

$$\Gamma (z)={\int }_0^{\infty }{t}^{z-1}{e}^{-t}dt.$$

流程图

1. TB（ top bottom）表示从上到下
2. BT（bottom top）表示从下到上
3. RL（right left）表示从右到左
4. LR（left right）表示从左到右

横向流程图(LR)

​```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

竖向流程图(TB)

​```mermaid
graph TB
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
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
​```
1
2
3
4
5
6
7
8
9
10
11
12

标准流程图（横向）

​```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
​```
1
2
3
4
5
6
7
8
9
10
11
12

时序图

简单UML时序图

-> 直线，–>虚线，->>实线箭头，–>>

​```mermaid
sequenceDiagram
前端->>后台服务: 请求
后台服务-->>前端: 响应
Note right of 后台服务: 后台服务server
Note left of 前端: android，iOS，H5
前端->>后台服务: query
后台服务-->>前端: return
​```
1
2
3
4
5
6
7
8
9

UML时序图复杂样例

​```mermaid
sequenceDiagram
Title:  UML时序图
安卓客户端->>后台服务: 发送查询请求?（请求）
Note right of 后台服务: 后台服务（提示）
Note left of 安卓客户端: 安卓客户端(提示)
后台服务-->>安卓客户端: 返回查询结果(响应)
后台服务->>风控: app查询请求
风控-->>安卓客户端: 后台已查询
安卓客户端->>后台服务: 保存个人设置
Note over 风控,后台服务: 我们都是后台服务
participant 运维
Note right of 运维: 上线中
​```
1
2
3
4
5
6
7
8
9
10
11
12
13
14

UML标准时序图样例

​```mermaid
%% 时序图,-> 直线，-->虚线，->>实线箭头，-->>
  sequenceDiagram
    participant 客户端
    participant 服务端
    客户端->>服务端: 查询请求
    服务端->>大数据: 信息验证请求
    大数据->>服务端:验证成功
    服务端-->>客户端: ok!
    loop music
        客户端->>客户端: 往事如烟呐...
    end
    Note right of 大数据: 数据爬取 信息认证 <br/>三方对接...
​```
1
2
3
4
5
6
7
8
9
10
11
12
13
14

甘特图

甘特图样例

​```mermaid
%% 语法示例
        gantt
        dateFormat  YYYY-MM-DD
        title 项目流程甘特图
        
        section 产品
        需求整理         :done,t1, 2019-11-20,2019-11-21
        原型设计         :active,  t2, 2019-11-21, 2d
        UI设计           :    t3, after t2, 5d
        三方对接         :    t4, after t3, 5d
        section 开发
        需求评审         :done, 2019-11-21,2d
        设计框架         :crit, active, after t2, 2d
        开发             :crit, active, 3d
        联调             :crit, 5d
        配合测试         :2d
        
        section 测试
        功能测试           :active, t21, after t3, 7d
        压力测试           :after t21  , 2d
        测试报告           : 1d
​```
section—模块
Completed—已经完成
Active—当前正在进行
Future—后续待处理
crit—关键阶段
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

参考文章：

• 菜鸟教程： Markdown 教程

---

1. 天道酬勤 ↩︎

2. 巧言令色鲜矣仁！ ↩︎