Markdown语法整理(详细版)
Markdown语法整理 目录
文章目录
- 1 概述
- 1.1 Markdown
- 1.2 Typora
- 2 标题和目录
- 2.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 主要参考
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之后没有效果了。在开头的时候,先输入下面的代码,然后紧跟着输入文本即可,分号也不要掉。
 或 //全角
 或 //半角
或 //半角之半角
效果如下
或 //全角
或 //半角
或 //半角之半角
- 对齐
代码如下:
<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. 一级有序列表11. 二级有序列表12. 二级有序列表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
%% 时序图例子,-> 直线,-->虚线,->>实线箭头sequenceDiagramparticipant 张三participant 李四张三->王五: 王五你好吗?loop 健康检查王五->王五: 与疾病战斗endNote right of 王五: 合理 食物 <br/>看医生...李四-->>张三: 很好!王五->李四: 你怎么样?李四-->王五: 很好!
```
- 甘特图样例
```mermaid
%% 语法示例ganttdateFormat YYYY-MM-DDtitle 软件开发甘特图section 设计需求 :done, des1, 2020-01-06,2020-01-08原型 :active, des2, 2020-01-09, 3dUI设计 : des3, after des2, 5d未来任务 : des4, after des3, 5dsection 开发学习准备理解需求 :crit, done, 2020-01-06,24h设计框架 :crit, done, after des2, 2d开发 :crit, active, 3d未来任务 :crit, 5d耍 :2dsection 测试功能测试 :active, a1, after des3, 3d压力测试 :after a1, 20h测试报告 : 48h
```
%% 语法示例ganttdateFormat YYYY-MM-DDtitle 软件开发甘特图section 设计需求 :done, des1, 2020-01-06,2020-01-08原型 :active, des2, 2020-01-09, 3dUI设计 : des3, after des2, 5d未来任务 : des4, after des3, 5dsection 开发学习准备理解需求 :crit, done, 2020-01-06,24h设计框架 :crit, done, after des2, 2d开发 :crit, active, 3d未来任务 :crit, 5d耍 :2dsection 测试功能测试 :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 超文本标记语言
使用 Markdown1可以效率的书写文档, 直接转换成 HTML2。
7 图表公式
7.1 插入图片
插入图片的语法格式如下,如果图片因为某些原因不能显示,图片就会用方括号里面的文字来代替图片,图片地址可以是网上的链接,也可以是本地的路径,可选标题是鼠标放上去会显示的文字,替代文字和标题都不是必须的,可以省略,建议写上。
![图片替代文字](图片地址 "可选标题")
如果需要缩放图片进行显示的话,可以用Html来写,在Typora中可以右键选择缩放,此时可以直接将Markdown的语法转为Html的语法,但这样缩放的另存为Html文件时达不到缩放的结果。大小也可以通过width和height属性来控制,这样控制的转成Html文件也能达到缩放的效果。
Markdown语法:
![Markdown Logo](https://bkimg.cdn.bcebos.com/pic/00e93901213fb80ef9ceac7132d12f2eb938947d?x-bce-process=image/watermark,g_7,image_d2F0ZXIvYmFpa2UxODA=,xp_5,yp_5 "Markdown")
缩放到10%语法如下:
<img src="https://bkimg.cdn.bcebos.com/pic/00e93901213fb80ef9ceac7132d12f2eb938947d?x-bce-process=image/watermark,g_7,image_d2F0ZXIvYmFpa2UxODA=,xp_5,yp_5" 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
$$
行内公式:Γ(z)=∫0∞tz−1e−tdt\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dtΓ(z)=∫0∞tz−1e−tdt
行间公式:
Γ(z)=∫0∞tz−1e−tdt\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt Γ(z)=∫0∞tz−1e−tdt
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:
,可以显示
Markdown语法整理(详细版)相关推荐
- Markdown语法大全(超级版)
Markdown语法大全(超级版) CSDN的参考文档并不全-- 文章目录 Markdown语法大全(超级版) 概述 设计理念 内联 HTML 语法 特殊字符自动转义 行内语法讲解 注释的表述 代码法 ...
- Markdown语法学习|精简版
markdown语法学习|精简版 文章开头 点击这里回到下方介绍 页面跳转 的阅读位置 点击这里回到下方介绍 toc 的阅读位置 此笔记学习摘抄自Markdown语法大全(超级版),并根据笔者的使用不 ...
- 有道云笔记markdown语法整理
0 标题 标题是每篇文章必备而且最常用的格式. 在Markdown中,如果想将一段文字被定义为标题,只需要在这段文字前面加上 #,再在 # 后加一个空格即可.还可增加二.三.四.五.六级标题,总共六级 ...
- Markdown语法整理
大部分内容来自<https://www.runoob.com/markdown/md-advance.html> 目录 @[TOC](这里写目录标题) 显示效果: 这里写目录标题 目录 标 ...
- Markdown语法--整理
Markdown基本语法 [TOC] 优点: 1.因为是纯文本,所以只要支持Markdown的地方都能获得一样的编辑效果,可以让作者摆脱排版的困扰,专心写作. 2.操作简单.比如:word编辑时标记个 ...
- MySQL基础语法(详细版)
文章目录 1.数据库的介绍 1.1 数据库概念 1.1.1 数据的存储方式 1.1.2 什么是数据库 2.数据库的安装与卸载 2.1数据库的安装 2.2数据库的卸载 3.数据库服务的启动与登录 3.1 ...
- Scala的基础语法(超详细版)
Scala的基础语法 文章目录 Scala的基础语法 1.声明值和变量 2.数据类型 3.算术和操作符重载 4.控制结构语句 4.1条件分支语句 4.2循环语句 5.方法与函数 5.1方法 5.2 函 ...
- 软件测试基础知识整理(详细版)收藏这篇足矣
一.认识软件测试 1.1 什么是软件测试? 使用技术手段验证软件是否满足需求 1.2 软件测试的目的 目的:用较少的人力.物力.和财力,找到软件中存在的问题并修复,降低商业风险 二.常见的测试分类 2 ...
- markdown语法与markdlint规则讲解
Markdown-基本语法及markdownlint规则 一.概述 Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. Markdow ...
最新文章
- iOS常用宏定义大全
- Linux安装/升级pip
- 需求获取安排计划书_创业型公司商业计划书PPT怎么写?才是投资人最想看的,免费领取...
- 计算机课组会议讲话,在计算机部教师会议上的讲话
- skip page cache - SAP gateway的调试
- python3.8对应django版本_Python Django 版本对应表
- 备件管理系统c语言,图书管理系统的设计与开发及体育用品库存管理系统设计.doc...
- 基于GPS的车辆导航及GPRS网络监控
- Apache详解(五)WEB相关工具
- 计算机自动隐藏桌面图标,Windows 8.1 右下角图标莫名自动隐藏
- 吐血推荐:无解的完成图
- OSChina 周二乱弹 ——普通高等男友招生考试
- 【Paper-Attack】A Targeted Universal Attack on Graph Convolutional Network
- 慢腾腾的Quartus prime16.0加快编译速度
- vue+mysql实现前端对接数据库
- AsyncTask——AsyncTask串行and并行
- vs2019生成dll文件及(C#)使用
- 【JokerのZYNQ7020】FLASH_TEST。
- 知道吗,你和高级工程师差距巨大
- 北京朝阳一互联网公司被警方一锅端了!23人被带走…这种岗位千万别干!