Markdown常用语法汇总

Markdown语法的版本不止一种，以下仅列举GitHub风格的Markdown(简称GFM)规范语法，本文正文用Markdown语法书写，原始语句及注释放在区块中(tab键、4个空格、```都可以生成区块，而且第三种还支持代码高亮)供参考：

一. 基础语法

 

1.1 标题

 

# 一级标题
## 二级标题
### 三级标题

大标题  
====

中标题  
-------

关于标题需要注意：  
1、#与标题之间要有空格；  
2、一篇文章通常只有一个一级标题；  
3、一级标题和二级标题下会有分割线；  
4、六级标题默认显示为浅灰色，通常可以用来做非主要信息的补充；  
5、除了用 # 来表达标题，还可以用=、-来表示，数量通常要大于3个，= 对应一级标题，-对应二级标题。

 

1.2 行段

 

两个空格+回车表示换行，或者使用html语言换行标签：<br>或者<br/>
空行表示分段。

 

1.3 标记

 

1.3.1 语义标记

 

斜体、斜体

加粗

加粗+斜体、加粗+斜体

删除线

 

1.3.2 语义标签

 

斜体

加粗

强调

下划线

删除

Za

Za

，ctrl

 

**1.3.1 语义标记**
*斜体*、_斜体_  
**加粗**  
***加粗+斜体***、**_加粗+斜体_**  
~~删除线~~  

**1.3.2 语义标签**
<i>斜体</i>  
<b>加粗</b>  
<em>强调</em>  
<u>下划线</u>   
<del>删除</del>  
Z<sup>a</sup>  
Z<sub>a</sub>  
<kbd>Ctrl</kbd>，`ctrl ` #语雀不支持第一种
最后一个是行内标记的两种用法，常用第二种，注意那不是单引号，而是1左边的英文下按键,该方法用来标记行内代码或其他需要着重强调的文本。

 

1.4 引用

 

hello world!  输入完之后按两次空格键再按一次Enter键即可

hello world!  输入完之后按两次空格键再按一次Enter键即可

hello world!  输入完之后按两次空格键再按一次Enter键即可

 

aaaaaaaaa

bbbbbbbbb

cccccccccc

 

> hello world!  输入完之后按两次空格键再按一次Enter键即可  
> hello world!  输入完之后按两次空格键再按一次Enter键即可  
> hello world!  输入完之后按两次空格键再按一次Enter键即可  

> aaaaaaaaa
>> bbbbbbbbb
>>> cccccccccc
在一个引用中换行，按两个空格即可，嵌套引用使用多个大于号就行。语雀不支持嵌套引用。

 

1.5 序列

 

1. one
2. two
3. three

 

• one
• two
• three

 

1. one

1. 1. one-1
   2. two-2

1. 1. 1. one-1
      2. two-2

1. two

• • two-1
  • two-2

 

• 一级

• • 二级

• • • 三级

• • • • 四级

• • • • • 五级

 

 

 

1. one
2. two
3. three

* one
* two
* three

1. one
    1. one-1
    0. two-2
        1. one-1
        2. two-2
2. two
    * two-1
    * two-2

* 一级
    - 二级
        - 三级
            * 四级
                - 五级 

1.星号后面必须有空格才会变成大圆点，这里*和-同义，还有+都可以，但最好统一；
2.序列的使用与上行紧挨不空行，二级序列递进缩进；
3.二级有序序列中的数字有时会被转成罗马数字，三级有序序列中的数字有时会被转成英文字母。

 

1.6 分割线

---

---

---

---

---

***
------
___

* * *
- - -
可以在一行中使用三个或更多的*，-或_来添加分隔线。

 

1.7 转义符

 

转义符''

转义符<br>

 

转义符'\'  
转义符\<br>
转义符的作用是拒绝语法翻译。

 

1.8 隐文本

[//]: # (1、哈哈我是注释，不会在浏览器中显示。)  
[^_^]: # (2、哈哈我是注释，不会在浏览器中显示。)  
[//]: <> (3、哈哈我是注释，不会在浏览器中显示。)
[comment]: <> (4、哈哈我是注释，不会在浏览器中显示。)
<!--5、哈哈我是注释，不会在浏览器中显示。-->
<!--
6、哈哈我是多段
注释，
不会在浏览器中显示。
-->
你什么也没看到，因为这些都是隐藏语法。

 

二. 插入语法

 

2.1 插入任务

 

• 🔲选项一
• ✅选项二

• • 🔲选项一
  • ✅选项二

 

 

 

- [ ] 选项一
- [x] 选项二
    - [ ] 选项一
    - [x] 选项二

 

2.2 插入表情

 

      

      

      

 

:smile:    :laughing:
:blush:    :smiley:
:smirk:    :heart_eyes:
Markdown支持添加emoji表情，输入不同的符号码（两个冒号包围的字符）可以显示出不同的表情，但在VScode Github的Markdown预览中不显示。

 

2.3 插入链接

 

百度

www.biadu.com

http://www.baidu.com

百度

 

[百度](http://www.baidu.com/ '百度一下')
www.biadu.com  
http://http://www.baidu.com  
<a href=www.baidu.com>百度</a>  
[]中括号中为连接显示的内容，后面引号中'百度一下'在鼠标移到'百度'二字时，会浮动显示，注意：与链接之间有空格。#语雀不支持浮显。
Github支持直接写的链接，像这样：www.biadu.com http://www.baidu.com  #语雀不支持。
最后一种形式为HTML标签属性，这种形式可以和其他HTML标签属性嵌套，比如居中的带链接文本。
点击该链接，会在原窗口打开，Github不支持在新窗口打开链接的语法。

 

2.4 插入邮箱

 

xxx@outlook.com

 

<xxx@outlook.com>

 

2.5 插入代码

 

from  pymongo import MongoClient
db = MongoClient('192.168.1.201', 30085).testdb
collection = db.bidding
for item in collection.aggregate([{'$sample': {'size':200}}]):
    print(item["_id"])
    collection2.save(item)

 

```python
from  pymongo import MongoClient
db = MongoClient('192.168.1.201', 30085).testdb
collection = db.bidding
for item in collection.aggregate([{'$sample': {'size':200}}]):
    print(item["_id"])
    collection2.save(item)
```
需要在代码的上一行和下一行用```标记。``` 不是三个单引号，而是数字1左边，Tab键上面的键，同时在前```后加上你的编程语言即可（忽略大小写）。

 

+ 人闲桂花落，
- 夜静春山空。
! 月出惊山鸟，
# 时鸣春涧中。

 

```diff
+ 人闲桂花落，
- 夜静春山空。
! 月出惊山鸟，
# 时鸣春涧中。
```
diff是Github支持的比较语法，+表示增加行，-表示删除行，!表示有差别，#表示备注。

 

2.6.1 插入表格

a	b	c
居中	左对齐	右对齐

a	b	c
居中	左对齐	右对齐

 

|a|b|c|
|:--:|:--|--:|
|居中|左对齐|右对齐|

a  |  b  | c  
:---:|:------------ |--:
居中 |  左对齐 |  右对齐 

第二行是表头与内容的分割，用':'表示对齐方式，第二种为简约写法，里面的空格不会被显示出来，通常使用空格使语法对齐。

 

2.6.2 表格合并

列一	列二
合并行
列一	列二
合并列	行二列二
	行三列二

文件状态：        [√] 草稿        [√] 正在修改        [√] 正式发布	文件标识：
	当前版本：	2.7
	作    者：
	创建日期：
	最后更新：
	密    级：
	版权说明：

 

<table>
    <tr>
        <td>列一</td> 
        <td>列二</td> 
</tr>
<tr>
        <td colspan="2">合并行</td>    
</tr>
<tr>
        <td>列一</td> 
        <td>列二</td> 
</tr>
    <tr>
        <td rowspan="2">合并列</td>    
        <td >行二列二</td>  
    </tr>
    <tr>
        <td >行三列二</td>  
    </tr>
</table>
*******************************
<table>
<tr>
    <td rowspan="7"> 文件状态：<br/>
        [√] 草稿<br/>
        [√] 正在修改<br/>
        [√] 正式发布 </td>
    <td>文件标识：</td>
    <td> </td>
</tr>
<tr>
    <td>当前版本：</td>
    <td>2.7</td>
</tr>
<tr>
    <td>作    者：</td>
    <td></td>
</tr>
<tr>
    <td>创建日期：</td>
    <td></td>
</tr>
<tr>
    <td>最后更新：</td>
    <td></td>
</tr>
<tr>
    <td>密    级：</td>
    <td></td>
</tr>
<tr>
    <td>版权说明：</td>
    <td></td>
</tr>
</table>

<table></table>表示表，<tr></tr>表示行，<th></th>表示表头，<td></td>表示单元格，<td rowspan="7">表示向下占7列，<td colspan="2">表示向右占2列。(一个<table>元素包含多个<tr>元素，一个<tr>元素包含一个或多个<th>或<td>元素)

 

2.6.3 格内换行

Header1	Header2
item 1	1. one 2. two 3. three

 

| Header1 | Header2                          |
|---------|----------------------------------|
| item 1  | 1. one<br />2. two<br />3. three |
借助了HTML里的 <br/> 来实现。

 

2.7.1 插入图片

 

 

 

![图片](https://github.com/guodongxiaren/README/raw/master/img/csdn.png '描述')
插入图片的代码比链接多了'!'，前面[]中内容正常不显示，仅在图片失效时显示，后面'描述'在鼠标移到图片时，会浮动显示。插入图片最好使用网络图床，比如：Github，七牛。
如果使用github，需要注意：把图片地址中的blob改为raw，例如：
图片地址：https://github.com/446020169/open/blob/master/Subscribe_report/Image/1.1.jpg
图床地址：https://github.com/446020169/open/raw/master/Subscribe_report/Image/3.0.jpg
Github不支持gif图片的渲染；点击图片会在新窗口打开图片。

 

2.7.2 插入带链接图片

 

 

 

[![优快云](https://github.com/guodongxiaren/README/raw/master/img/csdn.png 'IT技术社区')](https://www.youkuaiyun.com)
可以理解为这是插入链接嵌套图片的应用，打开方式依然是原窗口。

 

2.8.1 图片和链接的标记引用 

 

我的知乎

 

 

[我的知乎][zhihulianjie]
![知乎][zhihutupian]

[zhihulianjie]:https://www.zhihu.com
[zhihutupian]:https://github.com/guodongxiaren/README/raw/master/img/zhihu.png
我比较喜欢用这种形式插入图片或链接，先在正文中用名称来标记，然后在文章末尾统一给出链接地址。

 

2.8.2 连接Github本仓库的URL

 

我的介绍

 

 

[我的介绍](./example/profile.md)  
![我的图片](./Image/2.2.jpg)
这种方式必须保证图片和md文件地址保持相对不变，好处是简单方便，而且省去了把blob改为raw的繁琐。

 

三. 排版语法

 

3.1 缩进

 

  半角的空格

  全角的空格

 

  半角的空格  
  全角的空格
空格符可以单独使用，达到创建空行的目的，还可以用隐文本来达到显示空行的目的，隐文本的空行比空格符的空行窄。

 

3.2 居中

 

我是绿色居中

<div align = "center">我是红色居中</div>
<p align = "center">我是绿色居中</p>
除了居中，还可以`left`居左、`right`居右，不过Markdown默认居左。

 

3.3 文章锚点

 

目录中的标题

下面的正文中的标题

 

[目录中的标题](#head1)
<span id = "head1"> **下面的正文中的标题**</span>
点击锚点，跳转至锚点链接的位置，通常用来建立目录，或者文章内部互相跳转。

 

3.4 文字绕图

 

 

这是一个示例图片。

 

图片显示在 N 段文字的右边。

 

N 与图片高度有关。

 

刷屏行。

 

刷屏行。

 

到这里应该不会受影响了，本行应该延伸到了图片的正下方，所以我要足够长才能确保不同的屏幕下都看到效果。

 

<img align="right" src="https://github.com/guodongxiaren/README/raw/master/img/zhihu.png"/>

这是一个示例图片。

图片显示在 N 段文字的右边。#语雀无环绕效果。

N 与图片高度有关。

刷屏行。

刷屏行。

到这里应该不会受影响了，本行应该延伸到了图片的正下方，所以我要足够长才能确保不同的屏幕下都看到效果。

这里是使用 <img> 标签来贴图，然后指定 align 属性。

 

3.5 勉强配色

 

我是红色

我是绿色

我是蓝色

 

![#f03c15](https://placehold.it/15/f03c15/000000?text=+) 我是红色  
![#c5f015](https://placehold.it/15/c5f015/000000?text=+) 我是绿色  
![#1589F0](https://placehold.it/15/1589F0/000000?text=+) 我是蓝色  
1.这是很勉强的配色，是使用占位符图像服务在markdown中添加一些颜色，使整体看起来不那么单调。
2.链接中f03c15、c5f015、1589F0是颜色的代码。

 

3.6 保留区块格式

 

flag_list = [

 {"医疗1":["医疗","医生"]},

 {"教育2":["教育","学校"]},

 {"政务3":["政务"]},

 {"交通4":["交通"]},

 {"安防":["安防"]}

 ]# 标签，值列表

 

<pre>
flag_list = [
    {"医疗1":["医疗","医生"]},
    {"教育2":["教育","学校"]},
    {"政务3":["政务"]},
    {"交通4":["交通"]},
    {"安防":["安防"]}
    ]# 标签，值列表
</pre> 
被包围在<pre>标签元素中的文本可以保留空格和换行符。

 

3.7 图片大小位置

图片默认显示效果：

改变尺寸的效果：

改变尺寸且居中的效果：

**图片默认显示效果：**  
![](https://github.com/guodongxiaren/README/raw/master/img/zhihu.png)
**改变尺寸的效果：**  
<img width = '150' height ='150' src ="https://github.com/guodongxiaren/README/raw/master/img/zhihu.png"/>
**改变尺寸且居中的效果：**  
<div align=center><img width = '150' height ='150' src ="https://github.com/guodongxiaren/README/raw/master/img/zhihu.png"/></div>
标准的 Markdown 图片标记 ![]() 无法指定图片的大小和位置，只能依赖默认的图片大小，默认居左。有时原图太大，想要缩小一点，或者想将图片居中，就仍需要借助 HTML 的标签来实现。图片居中可以使用 <div> 标签加 align 属性来控制，图片宽高则用 width 和 height 来控制。

 

四. One more thing

4.1 Github不支持的语法

1. 不支持解释行；
2. 不支持Latex数学公式；
3. 不支持uml流程图、时序图；
4. 不支持注脚，加注后文章末尾显示注脚；
5. 不支持[TOC]用于放在文章开头生成目录；
6. 不支持<!-- @import "[TOC]" {cmd="toc" depthFrom=2 depthTo=3 orderedList=false} -->生成目录；
7. 不支持插入在新窗口打开的链接，
   <a href="http://blog.youkuaiyun.com/qq_39422642" target="_black">跳到自己博客列表</a>
<a href="http://blog.youkuaiyun.com/qq_39422642" target="_blank">跳到自己博客列表</a>
   注意：target="_blank"意为每次点击都打开新的窗口；target="_black"意为当新标签已经打开，点击第二次就不会再打开新标签了，而是刷新之前的那个标签；
8. 不支持插入音乐，
   <div align=center><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=30375690&auto=1&height=66"></iframe></div> 如果不想自动播放，可以把auto改为1，不同音乐外链的方式可能不同；
9. 不支持插入视频， <iframe height=498 width=510 src='http://player.youku.com/embed/XMjgzNzM0NTYxNg==' frameborder=0 'allowfullscreen'></iframe> 这里是插入HTML的iframe框架，地址可以通过网站自带的分享功能获取。当然，Github可以通过点击伪造播放界面图片从而跳转到视频界面；
10. 不支持文字背景色，
    <table><tr><td bgcolor=orange>我是背景色</td></tr></table>
<table><tr><td bgcolor=#FFB6C1>我是背景色</td></tr></table>
    这是借助html的table, tr, td 等表格标签的 bgcolor 属性来实现背景色的功能。但是对rgb、hsv、cmyk颜色的显示总是错误，所以只能用16进制颜色值，或颜色英文名称。背景色代码会自动换行，无法对一行内的部分文字加底色；
11. 不支持字体字号颜色，
    <font face="黑体"> 我是黑体字 </font>
<font face="微软雅黑"> 我是微软雅黑 </font>
<font face="STCAIYUN"> 我是华文彩云 </font>
<font face="黑体" color=#0099ff size=7> 你好hello word </font>
<font color=#00ffff size=72> 你好hello word </font>
<font color=gray size=72> 你好hello word </font>
    这是内嵌HTML的方法；
    <div align="center" style="color:red;font-size:30px;font-family:'黑体';">我是红色居中</div>
<p align="center" style="color:#76EE00;font-size:30px; font-family:'黑体';">我是绿色居中</p>
    这是直接使用HTML标签和内嵌CSS样式，感人的是align="center"还是有效的，Github支持居中语法。

4.2 VScode Markdown的使用

1. VScode中的Markdown Preview Enhanced插件，功能强大，但和其他Markdown的语法兼容性一般，不过可以作为辅助工具来使用，比如：

• • 上面Github不支持的目录功能，可以使用上面6的代码生成带链接目录，然后再上传Github；
  • 可以导入其他Markdown文档，这个功能可以将碎片的Markdown文本进行集中汇总展示；
  • 至于其他功能，诸如Markdown内画图、跑程序的骚操作就算了。

1. 用VScode写Markdown，如果有很多波浪线，可能是安装了Markdownlint插件，该插件的好处就是规范化你的Markdown语法，坏处就是逼死强迫症，鲁迅说“没有限制就没有创造力”，哈哈。建议还是开启着，可以规范化自己的语法结构。

4.3 Markdown辅助工具

本文部分素材来源

在线Markdown编辑器

Markdown表情符号(中文粗分类)

Markdown表情符号(英文细分类)

颜色名称及代码