markdown语法说明

发表于 更新于 分类于 阅读次数：

介绍 markdown 基本语法，方便日后查看。

markdown编辑器

标题

标题使用 # 号开头来表示 h1 - h6 。

1
2
3
4
5
6
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

列表

无序列表

使用 + 或 - 开头的方式来定义无需列表。

1
2
+ 无序列表1
- 无序列表2

有序列表

使用 1. 开头的方式来定义有序列表。

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

强调

粗体

使用 ** ** 双星号包裹文字的方式来加粗文字。或者使用 __ __ 来加粗文字。

1
2
**加粗字体**
__加粗文字__

斜体

使用* * 单星号包裹文字的方式来倾斜文字。你也可以使用 _ _ 下划线的方式包裹文字倾斜字体。

1
2
*斜体字*
_斜体字_

删除线

使用 ~~ ~~ 来给文字添加删除中线。

1
~~被删除的文字~~

高亮代码块

使用 2个反引号 高亮行内代码，使用 3个或3个以上的反引号 来包裹代码块，表示代码块时在 反引号 后可以指定代码块的语言类型。

1
2
3
4
5
​``` javascript
  function hello (){
    console.log('hello markdown!')
  }
​```

有的时候，你可能会需要使用 代码块 语法去包裹展示另一语言，那么在转义的时候，会出现错误样式，例如下方的输入：

1
2
3
4
5
6
7
``` md
​``` javascript
  function hello (){
    console.log('hello markdown!')
  }
​```
```

那么，你可以采用递增式的反引号包裹的方式：

1
2
3
4
5
6
7
```` md
​``` javascript
  function hello (){
    console.log('hello markdown!')
  }
​```
````

这样，代码块的样式就会正常渲染。

分割线

使用 ***** 、----- 、_____ 或 +++++ 来添加分割线，每个符号保持 5 个以上即可。

1
2
3
4
*****
-----
_____
+++++

区块引用

使用 > 开头的方式可以添加区块引用的效果，并且可嵌套使用。

1
2
3
> 这段文字会在一个区块内显示
>> 还可以嵌套
...

表格

表格的实现语法同样简单，如下：

1
2
3
4
| 表头1 | 表头2 | 表头3 |
| :--- | :---:| ---: |
| 文字左对齐 | 文字居中 | 文字右对齐 |
| 第二行文字 | 第二行文字 | 第二行文字 |

我如何控制单元格的宽度？

可以利用在 HTML 标签中包裹文本的方式，例如：

输入：

1
2
3
4
| 表头1 | 表头2 | 表头3 |
| :--- | :---:| ---: |
| <div style="width: 120px;">文字左对齐</div> | 文字居中 | 文字右对齐 |
| 第二行文字 | 第二行文字 | 第二行文字 |

输出：

表头1 表头2 表头3
文字左对齐
 文字居中 文字右对齐
第二行文字 第二行文字 第二行文字

插入图片

使用 ![alt](src "title") 的方式来插入图片。[alt] 中可以定义图片的 alt 属性，() 中 src 为图片地址，可以是本地地址，也可以是远程地址。

1
![图片加载时显示文案](./imgs/1.jpg "图片标题文案")

超链接

使用 [content](href "title") 的方式使用超链接，[content] 中定义显示文本，() 中 href 为链接地址, title 为 a 链接 title 属性。你也可以使用 html 中的 <a> 标签来使用超链接。

1
2
[百度](http://www.baidu.com "title")
<a href="http://www.baidu.com" title="title">百度</a>

百度

流程图

将流程图代码包裹在 3个反斜杠 + flow 和 另一个 3反斜杠 之间即可。

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
​``` flow
  st=>start: 开始
  io1=>inputoutput: 输入用户名密码
  cond1=>condition: 确定要修改密码吗?
  op=>operation: 修改用户密码
  e=>end: 结束

  st->io1->cond1
  cond1(no)->io1
  cond1(yes)->op->e
​```
````

流程图代码分两块，上面一块是创建你的流程（创建元素），然后隔一行，创建流程的走向(连接元素)。

创建流程（元素）：tag=>type: content:>url

- tag 是流程图中的标签，在第二段连接元素时会用到。名称可以任意，一般为流程的英文缩写和数字的组合。

- type 用来确定标签的类型，=>后面表示类型。由于标签的名称可以任意指定，所以要依赖type来确定标签的类型

- 标签有6种类型：`start` `end` `operation` `subroutine` `condition` `inputoutput`

- content 是流程图文本框中的描述内容，: 后面表示内容，中英文均可。特别注意，冒号与文本之间一定要有个空格

- url是一个连接，与框框中的文本相绑定，:>后面就是对应的 url 链接，点击文本时可以通过链接跳转到 url 指定页面

  ​

指向流程(连接元素)：标识（类别）->下一个标识

- 使用 -> 来连接两个元素
- 对于`condition`类型，有`yes`和`no`两个分支，如示例中的`cond(yes)`和`cond(no)`
- 每个元素可以制定分支走向，默认向下，也可以用`right`指向右边，如示例中`cond2(yes,right)`。

``` flow
st=>start: 开始
io1=>inputoutput: 输入用户名密码
cond1=>condition: 确定要修改密码吗?
op=>operation: 修改用户密码
e=>end: 结束

st->io1->cond1
cond1(no)->io1
cond1(yes)->op->e

Emoji

使用双冒号 : : 中间加入表情名的方式来插入表情图标Emoji。

1
:emojiName:

例：

:smile: :smile:

人物

图标 语法
:smile: :smile:
:cry: :cry:
:kissing: :kissing:
:blush: :blush:
:smirk: :smirk:
:kissing_closed_eyes: :kissing_closed_eyes:
:satisfied: :satisfied:
:stuck_out_tongue_winking_eye: :stuck_out_tongue_winking_eye:
:sleeping: :sleeping:
:anguished: :anguished:
:confused: :confused:
:unamused: :unamused:
:disappointed_relieved: :disappointed_relieved:
:disappointed: :disappointed:
:cold_sweat: :cold_sweat:
:sob: :sob:
:scream: :scream:
:angry: :angry:
:sleepy: :sleepy:
:heartpulse: :heartpulse:

符号

图标 语法
:warning: :warning:
:link: :link:
:one: :one:
:four: :four:
:seven: :seven:
:keycap_ten: :keycap_ten:
:hash: :hash:
:arrow_down: :arrow_down:
:capital_abcd: :capital_abcd:
:arrow_lower_left: :arrow_lower_left:
:arrow_up: :arrow_up:
:arrow_double_down: :arrow_double_down:
:arrow_heading_down: :arrow_heading_down:
:arrow_right_hook: :arrow_right_hook:
:arrow_up_small: :arrow_up_small:
:rewind: :rewind:
:ok: :ok:
:repeat_one: :repeat_one:
:up: :up:
:ng: :ng:
:signal_strength: :signal_strength:
:sa: :sa:
:womens: :womens:
:parking: :parking:
:baggage_claim: :baggage_claim:
:potable_water: :potable_water:
:congratulations: :congratulations:
:left_luggage: :left_luggage:
:cl: :cl:
:no_entry_sign: :no_entry_sign:
:do_not_litter: :do_not_litter:
:no_pedestrians: :no_pedestrians:
:eight_spoked_asterisk: :eight_spoked_asterisk:
:vs: :vs:
:chart: :chart:
:taurus: :taurus:
:leo: :leo:
:scorpius: :scorpius:
:aquarius: :aquarius:
:six_pointed_star: :six_pointed_star:
:b: :b:
:on: :on:
:diamond_shape_with_a_dot_inside: :diamond_shape_with_a_dot_inside:
:copyright: :copyright:
:interrobang: :interrobang:
:heavy_plus_sign: :heavy_plus_sign:
:white_flower: :white_flower:
:ballot_box_with_check: :ballot_box_with_check:
:curly_loop: :curly_loop:
:trident: :trident:
:white_check_mark: :white_check_mark:
:black_circle: :black_circle:
:large_blue_circle: :large_blue_circle:
:small_blue_diamond: :small_blue_diamond:
:small_red_triangle_down: :small_red_triangle_down: