Markdown语法总结

Benjamin Lee 收录于脚本

2022-01-11 约 5867 字预计阅读 12 分钟次阅读

前言

Markdown是一种轻量级标记语言，于2004年由创始人John Gruber发布，采用并不复杂的语法，可以书写简洁美观带有格式的文本。

基本语法

关于符号

重要的事情提前说：Markdown中的所有标记符号都是英氏符号，也就是输入法为输入英文状态下的时候。(尤其警惕竖向分隔线|，感叹号!，括号()，等等…中英文的这几个有点像)

段落与换行

空行可以用来段落分割，输入回车Enter换行即可；
段落内换行可以使用<br>来换行，通常可以用在markdown表格内换行;
某些markdown编辑器在写完上一行文本后输入Enter换行依然未能换行生效，那就再Enter一个空行，或者在上一行末尾加2个连续空格；
如果不是在列表内的段落，不鼓励行首缩进；

标题层级

Markdown使用符号 # 来表示标题的层级，几个 # 号就是几级标题，通常用到4级就足够内容排布了。

输入内容	渲染效果
# 一级标题 ## 二级标题 ### 三级标题	一级标题二级标题三级标题

输入内容

渲染效果

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

一级标题

二级标题

三级标题

标题细节

#号和标题内容之间有空格
顺便一提,标题层级x其实转化为html等同于<hx> 标题内容 </hx>，x为数字(😏上述表格内右边内容我其实用的html标签，表格内的#号形式没法渲染)

字体强调

字体加粗：加粗的内容使用前后2个连续的星号* 包围起来,例如：

输入内容渲染效果

这是**加粗**的内容这是加粗的内容

输入内容	渲染效果
这是加粗的内容	这是加粗的内容

⚠️

如果加粗的内容有*,#,-,这一类markdown语法有关的字符，可以用英式反斜杠\加在前面转义(实际上想让任何markdown的某个标记符号失效，都可以用反斜杠\转义从而escape);

某些Markdown编译器对*号解析有点问题，如果渲染效果未生效，外侧的*号前后加空格即可,和未加粗的内容分隔开👉假如"前文**加粗内容**后文"不生效，修改成"前文 **加粗内容** 后文"即可。

字体斜体：斜体的内容使用前后1个星号*包围或者前后1个下划线_包围起来,例如：

输入内容渲染效果

这是*斜体*的内容这是斜体的内容

这也是 _斜体_ 的内容这也是斜体的内容
代码字体：行内代码的内容使用前后1个英式反引号包围起来(反引号`在键盘左上角,数字1左边)，一般来说，代码语法渲染后有轻度高亮的效果，例如:

输入内容渲染效果

这是`代码`的内容这是代码的内容
~~字体删除线~~：对删除线的内容前后2个连续的英式波浪号 ~包围起来，例如：

输入内容渲染效果

~~这是删除线的内容~~ ~~这是删除线的内容~~

输入内容	渲染效果
这是斜体的内容	这是斜体的内容
这也是 _斜体_ 的内容	这也是斜体的内容

输入内容	渲染效果
这是`代码`的内容	这是`代码`的内容

输入内容	渲染效果
~~这是删除线的内容~~	~~这是删除线的内容~~

字体的组合:以上的效果可以组合起来使用：

输入内容	渲染效果
*加粗和斜体*	加粗和斜体
~~删除线和加粗~~	~~删除线和加粗~~
~~删除线和斜体~~	~~删除线和斜体~~
~~*加粗, 斜体和删除线*~~	~~加粗, 斜体和删除线~~
`加粗和高亮`	`加粗和高亮`

列表

列表分为无序列表和有序列表：无序列表用英式符号短横-、加号+、或星号* 后接空格来表示；有序列表使用数字加点接空格(例如"1. “)来表示。

输入内容	渲染效果
- 短横无序列表 - 短横无序列表	短横无序列表短横无序列表
+ 加号无序列表 + 加号无序列表	加号无序列表加号无序列表
* 星号无序列表 * 星号无序列表	星号无序列表星号无序列表
1. 数字有序列表 2. 数字有序列表	数字有序列表数字有序列表

提示：

列表一般会自动缩进，而且写完一条列表内容后，按下Enter换行，markdown会自动新建下一个列表

列表可以嵌套使用

引用

使用英式大于号 > 来标识一段引用内容，支持多行引用，也支持引用内列表。引用很有用，渲染效果一般是一段加了浅色阴影的文本，可以用于文首/文末的声明，参考链接等内容，有时可以用来做注意事项的声明。
输入内容：

1
2
3


> 注意：这是引用内容
> - 引用细节1
> - 引用细节2

渲染效果：

注意：这是引用内容

引用细节1

引用细节2

插入图片

markdown使用 ![图片描述](图片链接) 的形式来展示一张图片。
这个链接可以是本地链接，也可以是网络链接。

如果是只在本地看，可以使用本地链接，分为本地全路径和本地相对路径：
1. 本地全路径：有一张图在D:\Cat.png,那么可以在markdown中引入图片![小猫](D:\Cat.png) ;
2. 本地相对路径：本md文档同目录有个Pic目录，里面有张Cat.png,那么可以在markdown中引入图片![小猫](./Pic/Cat.png) ;
如果是需要发布到网络博客，那么就需要使用图片的网络链接了
想引用网页的某张图，鼠标右键复制图片链接地址, 就是我们需要的图片链接了。举例，去 菜鸟教程C++ 的主页，主页Logo复制到链接后，输入如下内容插入图片：
1

![C++ programming](https://www.runoob.com/wp-content/uploads/2015/01/cpp-mini-logo.png)
渲染后，图片则自动显示如下：

那么，如果我们自己的制作的图片想要上传到网络呢？
最常见的是写博客和云笔记，除了某些云笔记软件自带图床，更通常的做法是自己备份在Gitee或Github，更简便的办法是采用 图床 ,推荐个好用的开源工具PicGo，奉上👉 PicGO-Github-Release链接。

图片排版

首先，markdown插入图片都是左对齐的，有时想要图片居中，只能动用html排版了，具体用法如下(图片显示尺寸width字段可以省略不写 )：
输入内容:

1
2
3
4


<div align =center>
<img  src="https://www.runoob.com/wp-content/uploads/2015/01/cpp-mini-logo.png"
      width = "120"/>
</div>

渲染效果：

插入URL超链接

markdown 使用 [超链接描述](链接地址) ，适用场景：比如想给出某链接的地址，浏览者鼠标点击即可浏览器跳转。
比如输入内容：

1

[访问一个高Star的免费中文书籍仓库](https://github.com/justjavac/free-programming-books-zh_CN)

渲染效果：
访问一个高Star的免费中文书籍仓库

水平分隔线

在一个大段落之后，想和后续内容在视觉上有分隔效果，这时候就需要用到水平分隔线了。markdown中的水平分隔线使用方法：单行使用3个及以上的星号*(***),或短横线-(—),或下划线_(___)，且上下为空行，和正文分开。
输入内容(只演示*号，另外2种一样的):

1
2
3
4
5
6


段落1

*****

段落2

渲染效果:
段落1

段落2

扩展语法

在基础语法发布后，人们发现不够用，于是有了扩展语法。扩展语法的特性包括表格、代码段控制、脚注、标题ID(Heading ID,我更愿称之为标题锚点)、任务列表、Emoji表情、高亮语法等语法。
因为markdown是兼容html的，所以某些扩展语法需要借助html的各类标签。

提示

扩展语法不是所有Markdown编辑器都全盘支持，具体情况以该编辑器的支持情况为准；
代码段和表格基本都支持，其他的特性就很依赖编辑器的具体实现了；

表格

表格基本用法
表格使用英式竖向分隔线|和短横-来构建，举例如下：
输入内容(第一行表头,第二行表格分割线,第3~n行都是主体内容)：
1 2 3 4

|设备|iPhone11| macBookPro| 小米10|华为mate40Pro| |---| ---|---|---|---| |系统|iOS | macOS|Android|Android/Harmony| |供应商|Apple|Apple|小米|华为 |
渲染效果如下：

设备 iPhone11 macBookPro 小米10 华为mate40Pro

系统 iOS macOS Android Android/Harmony

供应商 Apple Apple 小米华为

提示💡 : 表格内如果想显示竖线分隔符|，需要使用\转义。
表格对齐
表格内容是可以做对齐的，只要将上述第二行的三条短横线改成 “:–"(左对齐)、"–:"(右对齐)、":-:"(居中对齐)，每列都能单独控制对齐方式。
单元格内多行
表格内多行需要借助html，比如某行内容太长或者想分行叙述两三项内容，就可以用换行符 <br> 实现单元格内换行。

设备	iPhone11	macBookPro	小米10	华为mate40Pro
系统	iOS	macOS	Android	Android/Harmony
供应商	Apple	Apple	小米	华为

表格单元格合并
markdown表格没有相关的语法，但是可以借助html标签，只要使用的编辑器支持html标签就可以渲染出来。
需要用到的标签：

colspan：规定单元格可纵深的列数
rowspan：规定单元格可横跨的行数
<table>的基本规则:
1. 整体表格描述用<table>和</table>包裹起来；
2. “绘制表格”的顺序从左到右，类似扫描，一行(几行)的描述，然后再从上到下；
3. 每一行表格使用<tr>和</tr>包裹起来；
4. 每个单元格的实际文本内容使用<td>和</td>包裹起来，行列伸展的rowspan/colspan在td内声明；
5. 单元格可以设置对齐方式，在<td>范围内使用align=“left”(或right,center,justify,char)；

例如，如下描绘了“表格列合并”：输入内容:

1
2
3
4
5
6
7
8
9


<table>
  <tr>
      <td>东方</td>
      <td align = "right">西门</td>
  </tr>
  <tr>
      <td colspan="2"  align = "center">姓氏</td>
  </tr>
</table>

渲染效果：

东方	西门
姓氏

如下描绘了稍微复杂的“表格行合并”：
输入内容如下(Code可展开):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<table>
    <tr>
        <td align="center">类别</td>
        <td>名称</td>
    </tr>
    <tr>
        <td rowspan="2" align="center">颜色</td>
        <td>红色</td>
    </tr>
    <tr>
        <td>黄色</td>
    </tr>
    <tr>
        <td>距离</td>
        <td rowspan="2">物理单位</td>
    </tr>
    <tr>
        <td>时间</td>
    </tr>
</table>

渲染效果：

类别	名称
颜色	红色
颜色	黄色
距离	物理单位
时间	物理单位

代码段

代码段的高亮使用3个连续的反引号 ` 来标识代码段，并后接语言类型(针对语法高亮)，结尾处用3个反引号包围代码段。如果不接语言类型，也是可以的，不做任何语法的高亮。如下是C++的代码例子：

输入以下内容

1
2
3
4
5
6
7


```c++  
#include <iostream>  
int main(){  
    std::cout << "hello world!\n";  
    return 0;  
}  
```

渲染效果： ```c++
#include
int main(){
std::cout « “hello world!\n”;
return 0;
}

 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
47
48
49
50
51
52
53
54
55
56
57
58



            提示
        
如果想要引述的代码块本身包含了3个连续的反引号```，那么就用连续的4个反引号````把它包围起来(上方C++的原文内容输入就是这么做的)。


markdown支持的代码段语言非常丰富 ，包括了几乎所有主流编程语言，参照比较通用的Github风格(GFM,Github Flavored Markdown)所支持的`语法高亮`，语言类型支持列表(参考[Languages Supported by Github Flavored Markdown](https://www.rubycoloredglasses.com/2013/04/languages-supported-by-github-flavored-markdown/))如下列表(Code可展开)：  
``` list
actionscript3
apache
applescript
asp
brainfuck
c
cfm
clojure
cmake
coffee-script, coffeescript, coffee
cpp
cs
csharp
css
csv
bash
diff
elixir
erb - HTML + Embedded Ruby
go
haml
http
java
javascript
json
jsx
less
lolcode
make - Makefile
markdown
matlab
nginx
objectivec
pascal
PHP
Perl
python
profile - python profiler output
rust
salt, saltstate - Salt
shell, sh, zsh, bash - Shell scripting
scss
sql
svg
swift
rb, jruby, ruby - Ruby
smalltalk
vim, viml - Vim Script
volt
vhdl
vue
xml - XML and also used for HTML with inline CSS and Javascript
yaml

目录树

markdown可以自动生成目录，一般在文档的开头位置，单独一行输入[TOC]，如果编辑器支持，是可以自动生成目录树的，支持点击跳转。

任务列表

任务列表特别适合记录TODO-List，复盘每天/每周的工作哪些做了，哪些没做。具体语法为“短横+空格+中括号[ ]”中括号内为空格表示不勾选，写入字母x则表示选中☑️,如下:
输入内容:

1
2
3
4
5


- [x] 基础功能Api完成
- [x] 各项功能单元测试
- [x] 测试部提测
- [ ] 提测反馈修复与迭代
- [ ] 正式发版

渲染效果:

基础功能Api完成
各项功能单元测试
测试部提测
提测反馈修复与迭代
正式发版

标题ID

标题ID(heading IDs)这个功能其实是用来给某级标题做个自定义的id标记，方便阅读者在另外一个位置通过这个指定的id跳转的。举例，本文的扩展语法下的代码段那一节的标题给他添加Heading-id，id标记名为"code-block”，则那一行的标题后要追加该id，写作：

1

## 代码段 {#code-block}

“代码段”这个标题渲染后看起来没什么不同。但是，我在本节，这个位置新增[转到代码段](#code-block),显示效果像链接，点这个跳转👉 转到代码段。就成功的跳转到了那一节的标题处。

其他用法：还可以用于给出远端链接时，那篇文章本身带有Heading-id，这样访问链接时直接跳转到指定的章节，而不是从头读起。
给出带有标题Id的链接格式为: [链接描述](链接地址/#heading-id名)，举例如下：

1

[markdown-guide的heading-id章节](https://www.markdownguide.org/extended-syntax/#linking-to-heading-ids)

渲染效果(点击后可根据heading-id直接跳转到指定章节)： markdown-guide的heading-id章节

高亮背景色

这个功能用的相对比较少，但是如果使用的markdown编辑器支持html的，渲染效果也不错。
用法：使用<mark>高亮背景内容</mark>来实现突出重要内容，渲染效果：高亮背景内容

上标下标

同样地，使用html标签语法来实现该功能：

上标用法：使用<sup>上标内容</sup>来实现上标效果，比如输入 国际认证商标<sup>TM</sup>，渲染效果：国际认证商标^TM
下标用法：使用<sub>下标内容</sub>来实现下标效果，比如输入 水的分子式为H<sub>2</sub>O，渲染效果：水的分子式为H₂O

提示：如果是要写数学公式，单就这2个是完全不够的，直接在Markdown编辑里找到math公式支持的设置，打开即可(或者是安装其对应的数学插件)，较为通用的有 mathJax , Katex 等。

Emoji表情

某些编辑器是支持使用Emoji表情的，具体用法：使用2个英式冒号包围表情短码,短码(short-code，可以理解为代号)的。举例如下：

输入内容	渲染效果
:roll_eyes:	🙄
:rofl:	🤣
:man_shrugging:	🤷‍♂️
:thinking:	🤔
:snail:	🐌
:house_with_garden:	🏡
:u7121:	🈚

这只是其中的几个表情，还有大量的Emoji表情，如官方列举👉：list of emoji short-codes.

参考链接

Markdown Guide - Basic Syntax

Markdown Guide - Extended Syntax

Markdown官方教程中文版

Toast-lab - Markdown Syntax