Markdown语法整理（详细版）

最新推荐文章于 2024-05-15 23:52:51 发布

sxsunxun

最新推荐文章于 2024-05-15 23:52:51 发布

阅读量1.4k

点赞数 3

分类专栏：学习笔记文章标签： markdown

本文链接：https://blog.csdn.net/m0_49783230/article/details/107721081

版权

学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Markdown语法整理 目录

1 概述

1.1 Markdown

Markdown是一种纯文本格式的标记语言，在 2004 由约翰·格鲁伯（英语：John Gruber）创建。通过简单的标记语法，它可以使普通文本内容具有一定的格式。易于阅读，方便创作web文档，利于各平台无缝分发。
HTML 是一种发布格式，Markdown 是一种创作格式。Markdown语法集合比较小，只是HTML标签的一小部分。对于 Markdown 中未包含的标签，可以直接使用 HTML标签，所以下面有些语法使用HTML实现的，不过现在Markdown编译器和各平台先支持情况都不太统一，可根据实际情况进行选择。如果想传递一个Markdown文件给别人的话，尽量不要加别的html属性进去，最好是测试满意后转换为pdf格式发给对方。

1.2 Typora

Typora是一款轻便简洁免费的Markdown编辑器，支持即时渲染技术，这也是与其他Markdown编辑器最显著的区别，本教程将使用 Typora 编辑器来讲解 Markdown 的语法。

2 标题和目录

2.1 标题

使用 #号可表示 1-6 级标题，#后面必须加空格，一级标题对应一个#号，二级标题对应两个 # 号，以此类推，超过6个按原文本显示。

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

2.2 目录

在Typora中，在段落中填写 [TOC] 以显示全文内容的目录结构，效果参见最上方的目录。有的编译器不支持，可以手动添加目录以达到跳转的目的，这样也更具个性。首先用如下代码添加目录：

* [1 一级标题](#1)
	* [1.1 二级标题1](#1.1)
	* [1.2 二级标题2](#1.2)

效果如下：

1 一级标题
- 1.1 二级标题1
- 1.2 二级标题2

在正文中，只要将章节标题的id对应上去即可：

<h1 id="1">1 一级标题</h2>
<h2 id="1.1">1.1 二级标题1</h3>
<h2 id="1.2">1.2 二级标题2</h3>

效果如下：

1 一级标题

1.1 二级标题1

1.2 二级标题2

3 段落和文本

3.1 缩进、对齐

首行缩进

Typora中，文本开头加入2个Tab或者8个空格，不过在转换成HTML之后没有效果了。在开头的时候，先输入下面的代码，然后紧跟着输入文本即可，分号也不要掉。

&emsp;或&#8195;//全角  
&ensp;或&#8194;//半角  
&nbsp;或&#160;//半角之半角

效果如下

或 //全角
或 //半角
或 //半角之半角

对齐

代码如下：

<center>行中心对齐</center>
<p align="left">行左对齐</p>
<p align="right">行右对齐</p>

对应的效果如下：

行中心对齐

行左对齐

行右对齐

## 3.2 换行、分隔线

换行

在Typora中，直接按Enter键就能实现换行，不过段落之间的间隔会比较大。用Shift+Enter也能实现换行，段落之间间隔会小，转换成HTML之后没有换行效果。如果用空格+空格+Shift+Enter能实现软回车，建议使用这个软回车。另外使用<br>也能实现换行，效果如下：

这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。（这里使用Enter）

这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。（这里使用Shift+Enter）
这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。（这里使用空格+空格+Shift+Enter）
这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。（这里使用<br>）
这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。

分隔线

你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线：

***
* * *
*****
- - -
----------

效果如下：

3.3 斜体、粗体

语法	效果
`斜体1`	斜体1
`_斜体2_`	斜体2
`粗体1`	粗体1
`__粗体2__`	粗体2
`*斜粗体1*`	斜粗体1
`___斜粗体2___`	斜粗体2
`__斜粗体1__`	斜粗体3
`_斜粗体1_`	斜粗体4

3.4 字体、字号、颜色

语法	效果
`<font face="华文彩云">字体</font>`	字体
`<font size=12>字号</font>`	字号
`<font color=red>颜色1</font>`	颜色1
`<font color=#0099ff>颜色2</font>`	颜色2
`<font color=green size=3 face="黑体">整体用法</font>`	整体用法

3.5 删除线、下划线、高亮

语法	效果
`~~删除线~~`	~~删除线~~
`<u>下划线</u>`	下划线
`==高亮要在Typora偏好设置里启用==`	高亮要在Typora偏好设置里启用

4 列表和区块

4.1 无序、有序、任务列表

无序列表

使用 *、+、-与空格结合来表示无序列表，效果都是一样的，如果需要嵌套的话，下一级的列表多加一个缩进，一个Tab或者四个空格，在Typora里面只要写一个，后面继续添加列表会补齐。代码如下：

* 无序列表1
+ 无序列表2
- 无序列表3
* 一级无序列表
	* 二级无序列表
		* 三级无序列表
			* 四级无序列表

效果如下：

无序列表1

无序列表2

无序列表3

一级无序列表
- 二级无序列表
  - 三级无序列表
    - 四级无序列表

有序列表

有序列表则使用数字接着一个英文句点，如果嵌套的话也是多加一个缩进，再次添加有序列表时，Typora也能自动补齐。代码如下：

1. 一级有序列表1
	1. 二级有序列表1
    2. 二级有序列表2
2. 一级有序列表2

效果如下

一级有序列表1
二级有序列表1
二级有序列表2
一级有序列表2

任务列表

任务列表可以用 - + Space+[ ] 或 -+Space+[x] 来表示，在Typora中也能在段落菜单栏中找到任务列表进行插入。代码如下：

- [ ] 任务一 未做任务
- [x] 任务二 已做任务

效果如下

任务一未做任务
任务二已做任务

4.2 区块引用

Markdown 区块引用是在段落开头使用>符号，然后后面加不加空格符号都可以，另外区块是可以嵌套的，一个> 符号是最外层，两个>符号是第一层嵌套，以此类推。代码如下：

> 最外层1
> 
>最外层2
>>第一层嵌套
>>>第二层嵌套

最外层1

最外层2

第一层嵌套

第二层嵌套

4.3 列表和区块联合使用

区块中使用列表

代码如下：

> 区块中使用列表
> 1. 第一项
> 2. 第二项
> + 第一项
> + 第二项

效果如下：

区块中使用列表

第一项
第二项

第一项
第二项

列表中使用区块

如果要在列表项目内放进区块，那么就需要在>前添加一个缩进。代码如下：

* 第一项
    > 区块1
    >
    > 区块2
* 第二项

效果如下：

第一项

区块1
区块2
第二项

5 代码和流程图

5.1 行内代码与代码块

如果是段落上的一个函数或片段的代码可以用反引号（`）把它包起来，反引号在Esc键下方。至于代码块，比较好用的就是用三个反引号（```）包裹一段代码，并指定一种语言，也可以不指定，在Typora里直接打出三个反引号就可以了。示例代码如下：

`printf()`

```c
#include <stdio.h>
int main(){
	printf("Hello World!")
}
```

效果如下：

printf()

#include <stdio.h>
int main(){
	printf("Hello World!")
}

5.2 流程图、时序图、甘特图

几个实例如下：

横向流程图

```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(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
```

竖向标准流程图

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

UML时序图简单样例

```mermaid
sequenceDiagram
对象A->>对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->>对象A: 我很好(响应)
对象A->>对象B: 你真的好吗？
```

UML时序图简单样例

```mermaid
sequenceDiagram
Title: 标题：复杂使用
对象A->>对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->>对象A: 我很好(响应)
对象B->>小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->>对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩
```

UML标准时序图样例

```mermaid
%% 时序图例子,-> 直线，-->虚线，->>实线箭头
  sequenceDiagram
    participant 张三
    participant 李四
    张三->王五: 王五你好吗？
    loop 健康检查
        王五->王五: 与疾病战斗
    end
    Note right of 王五: 合理 食物 <br/>看医生...
    李四-->>张三: 很好!
    王五->李四: 你怎么样?
    李四-->王五: 很好!
```

甘特图样例

```mermaid
%% 语法示例
        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                      :done,    des1, 2020-01-06,2020-01-08
        原型                      :active,  des2, 2020-01-09, 3d
        UI设计                    :         des3, after des2, 5d
        未来任务				   :         des4, after des3, 5d
        section 开发
        学习准备理解需求            :crit, done, 2020-01-06,24h
        设计框架                   :crit, done, after des2, 2d
        开发                      :crit, active, 3d
        未来任务                   :crit, 5d
        耍                        :2d
        section 测试
        功能测试                   :active, a1, after des3, 3d
        压力测试                   :after a1, 20h
        测试报告                   : 48h
```

%% 语法示例
        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                      :done,    des1, 2020-01-06,2020-01-08
        原型                      :active,  des2, 2020-01-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2020-01-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h

6 链接

6.1 超链接

行内式

语法说明：[]里写链接文字，()里写链接地址, ()中的""中可以为链接指定title属性，title属性可加可不加。title属性的效果是鼠标悬停在链接上会出现指定的 title文字，链接地址与title前有一个空格。

这是一个搜索引擎 [百度](https://www.baidu.com "baidu")

显示效果：

这是一个搜索引擎百度

参考式

参考式超链接一般用在学术论文上面，或者另一种情况，如果某一个链接在文章中多处使用，那么使用引用的方式创建链接将非常好，它可以让你对链接进行统一的管理。语法说明如下：
参考式链接分为两部分，文中的写法[链接文字][链接标记]，在文本的任意位置添加[链接标记]:链接地址，链接标记不仅限于数字。如果链接文字本身可以做为链接标记，你也可以写成[链接文字][]，此时链接地址的添加形式为 [链接文字]:链接地址。链接地址后面可以用""指定title属性，像行内式那样。

代码：

几个搜索引擎[百度][1]、[必应][bing]、[Google][]。
[1]:https://www.baidu.com
[bing]:https://cn.bing.com
[Google]:http://www.google.com

几个搜索引擎[百度][1]、[必应][bing]、[Google][]。
[1]:https://www.baidu.com
[bing]:https://cn.bing.com
[Google]:http://www.google.com

6.2 页内链接

页内链接在网页中也称锚点，也就是链接本文档内部的某些元素，实现当前页面中的跳转。

代码	效果
定义一个锚(id)：`<span id="jumpid">跳转到的地方</span>`	跳转到的地方
使用markdown语法跳转：`[点击跳转](#jumpid)`	点击跳转

接下来我可以做一个跳转到目录的：点击跳转到目录

6.3 自动链接

Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱，一般来说链接能够自动识别，如果需要间隔，需要用<>包起来。

代码	效果
`<http://example.com>`	http://example.com/
`mail<address@example.com>`	mailaddress@example.com

6.4 脚注

在需要添加注脚的文字后加上脚注名字[^注脚名字]，称为加注。然后在文本的任意位置（一般在最后）添加脚注，脚注前必须有对应的脚注名字，即使你没有把注脚写在文末，经Markdown转换后，也会自动归类到文章的最后。

使用 Markdown[^1]可以效率的书写文档, 直接转换成 HTML[^2]。

[^1]:Markdown是一种纯文本标记语言
[^2]:HyperText Markup Language 超文本标记语言

使用 Markdown¹可以效率的书写文档, 直接转换成 HTML²。

7 图表公式

7.1 插入图片

插入图片的语法格式如下，如果图片因为某些原因不能显示，图片就会用方括号里面的文字来代替图片，图片地址可以是网上的链接，也可以是本地的路径，可选标题是鼠标放上去会显示的文字，替代文字和标题都不是必须的，可以省略，建议写上。

![图片替代文字](图片地址 "可选标题")

如果需要缩放图片进行显示的话，可以用Html来写，在Typora中可以右键选择缩放，此时可以直接将Markdown的语法转为Html的语法，但这样缩放的另存为Html文件时达不到缩放的结果。大小也可以通过width和height属性来控制，这样控制的转成Html文件也能达到缩放的效果。

Markdown语法：
![Markdown Logo](https://i-blog.csdnimg.cn/blog_migrate/7e8d77c12d4e141f4942d917c8297e1d.png "Markdown")
缩放到10%语法如下：
<img src="https://i-blog.csdnimg.cn/blog_migrate/7e8d77c12d4e141f4942d917c8297e1d.png" alt="Markdown Logo" title="Markdown" width="10%"/>

缩放后的效果如下：

图片的对齐方式默认是中心对齐，如果需要其他的对齐方式，可以通过<div>标签和align 属性控制对齐方式，下面给出几种控制图片大小和对齐的代码模板。

<div align="center">
<img src="http://..." height="100" width="100" >
</div>
 
<div align="right">
<img src="http://..." width="10%" >
</div>
 
<div align="left">
<img src="http://..." style="zoom:10%" >
</div>

7.2 表格

在Typora中，可以直接插入，比较方便快捷。用语法实现的话，第一行为表头，第二行分隔表头和主体部分，第三行开始每一行为一个表格行。使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行。第二行还可以为不同的列指定对齐方向，默认为左对齐，示例如下。

|默认对齐|左对齐|中心对齐|右对齐|
|-------|:----|:----:|----:|
|左对齐|用:-|用:-:|用-:|

效果如下：

默认对齐	左对齐	中心对齐	右对齐
左对齐	用:-	用:-:	用-:

7.3 公式

一般公式分为两种形式：行内公式和行间公式，行内公式是在公式代码块的基础上前面加上$ ，后面加上$ 组成的，而行间公式则是在公式代码块前后使用$$ 和$$ ，行间公式在Typora中敲$$然后按回车就能出现公式代码块，行间公式是居中对齐的。下面给出一些例子，更多的使用方法可以自行搜索。

行内公式：$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt$
行间公式：
$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt
$$

行内公式： $\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt$
行间公式：
$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt$

8 其他

8.1 注释

代码法

<div style='display: none'>
哈哈我是注释，不会在浏览器中显示。
</div>

HTML注释

<!--哈哈我是注释，不会在浏览器中显示。-->

<!--
哈哈我是多段注释，
不会在浏览器中显示。
    -->

Hack方法

hack方法就是利用markdown的解析原理来实现注释的。一般有的markdown解析器不支持上面的注释方法，这个时候就可以用hack方法。 hack方法比上面2种方法稳定得多，但是语义化太差。

[//]: # (哈哈我是最强注释，不会在浏览器中显示。)
[^_^]: # (哈哈我是最萌注释，不会在浏览器中显示。)
[//]: <> (哈哈我是注释，不会在浏览器中显示。)
[comment]: <> (哈哈我是注释，不会在浏览器中显示。)

8.2 特殊字符转义

Markdown中的转义字符为\，转义的有：\ 反斜杠、` 反引号、* 星号、_ 下划线、{} 大括号、[] 中括号、() 小括号、 # 井号、+ 加号、- 减号、. 英文句号、! 感叹号。转义后的字符就不能作为语句解释了。在 HTML 中, 有两个字符需要特殊对待： < 和 &，左尖括号用于起始标签。如果你想将它们用作字面量，你必须将它们转义为字符实体, 例如<和&。一些特殊字符的代码如下：

特殊字符	字符描述	字符代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
¥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°C	摄氏度	`°C`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方上标	`²`
³	立方上标	`³`

8.3 支持的 HTML 元素

不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写，但也只支持部分标签。下面列举一些：

代码	效果
`<kbd>键盘文本</kbd>`	`键盘文本`
`<b>加粗</b>`	加粗
`<i>斜体</i>`	斜体
`<em>强调</em>`	强调
`<strong>更强的强调</strong>`	更强的强调
`X<sup>上标</sup>`	X^上标
`X<sub>下标</sub>`	X_下标

8.4 表情

Markdown语法支持添加emoji表情，输入不同的符号码（两个冒号包围的字符）可以显示出不同的表情。比如:blush:，可以显示😊。具体每一个表情的符号码，可以查询GitHub的官方网页http://www.emoji-cheat-sheet.com。

9 主要参考

Markdown是一种纯文本标记语言 ↩︎
HyperText Markup Language 超文本标记语言 ↩︎

sxsunxun

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
Markdown语法整理（详细版）

Markdown语法整理目录文章目录1 概述1.1 Markdown1.2 Typora2 标题和目录2.1 标题2.2 目录3 段落和文本3.1 缩进、对齐3.3 斜体、粗体3.4 字体、字号、颜色3.5 删除线、下划线、高亮4 列表和区块3.1 无序、有序、任务列表3.2 区块引用3.3 列表和区块联合使用4 代码和流程图4.1 行内代码与代码块4.2 流程图、时序图、甘特图5 链接5.1 超链接5.2 页内链接5.3 自动链接5.4 脚注6 图表公式6.1 插入图片6.2 表格6.3 公式7 其他
复制链接

扫一扫

专栏目录

特殊字符	字符描述	字符代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
¥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°C	摄氏度	`°C`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方上标	`²`
³	立方上标	`³`

特殊字符	字符描述	字符代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
¥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°C	摄氏度	`°C`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方上标	`²`
³	立方上标	`³`

Markdown语法整理（详细版）

文章目录

1 概述

1.1 Markdown

1.2 Typora

2 标题和目录

2.1 标题

2.2 目录

1 一级标题

1.1 二级标题1

1.2 二级标题2

3 段落和文本

3.1 缩进、对齐

3.3 斜体、粗体

3.4 字体、字号、颜色

3.5 删除线、下划线、高亮

4 列表和区块

4.1 无序、有序、任务列表

4.2 区块引用

4.3 列表和区块联合使用

5 代码和流程图

5.1 行内代码与代码块

5.2 流程图、时序图、甘特图

6 链接

6.1 超链接

6.2 页内链接

6.3 自动链接

6.4 脚注

7 图表公式

7.1 插入图片

7.2 表格

7.3 公式

8 其他

8.1 注释

8.2 特殊字符转义

8.3 支持的 HTML 元素

8.4 表情

9 主要参考

“相关推荐”对你有帮助么？

特殊字符	字符描述	字符代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
¥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°C	摄氏度	`°C`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方上标	`²`
³	立方上标	`³`