Markdown语法基础

语言: CN / TW / HK

本文包含的Markdown语法有:

  • 标题
  • 文字
  • 粗斜体
  • 划线
  • 脚注
  • 段落
  • 换行
  • 分隔符
  • 列表
  • 区块引用
  • 代码
  • 链接
  • 图片
  • 表格
  • 目录
  • 注释
  • 支持的HTML元素
  • 转义字符

标题

在Markdown 中标题可以使用两种方式来

  • 一种是用 =-
  • 一种是用 #

1. 使用 =-

至少用三个 =-

代码示例:

一级标题
===
二级标题
---

2. 使用 #

在想要设置为标题的文字前面加 # 来表示

  • # 后面要加空格
  • 一个#是一级标题,二个#是二级标题,以此类推。支持六级标题。

代码示例:

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

文字

粗斜体

在MarkDown里,粗、斜体有两种写法,一种是用 * ,一种是用 _ 包裹住你要改变的内容

*_ 与内容要紧贴着,之前不能用空格

  • 一个 * 或一个 _ 是斜体
  • 两个 * 或两个 _ 是粗体
  • 三个 * 或三个 _ 是粗斜体

代码示例:

*斜体文本*          _斜体文本_
**粗体文本**        __粗体文本__
***粗斜体文本***    ___粗斜体文本___

示例效果:

斜体文本 粗体文本 粗斜体文本

划线

在MarkDown中没有上划线和下划线的自身语法,只有删除线(中划线)的语法,但可以通过其他方式实现

  • 上划线可以通过 Latex 公式实现
  • 删除线(中划线)
  • 下划线使用 HTML 语法或 Latex 公式 实现

代码示例:

<!--通过Latex公式实现上划线-->
$\overline{\text{上划线}}$

~~删除线~~

<!--通过Latex公式实现下划线-->
$\underline{\text{下划线}}$

<!--通过HTML标签实现下划线-->
<u>下划线</u>

示例效果:

<!--通过Latex公式实现上划线-->

$\overline{\text{上划线}}$

删除线

<!--通过Latex公式实现下划线-->

$\underline{\text{下划线}}$

<!--通过HTML标签实现下划线-->

<u>下划线</u>

脚注

在MarkDown中支持添加脚注方式来对文本进行补充说明。

在需要添加注脚的文字后加上脚注名:。 然后在文本的任意位置(一般在最后)添加脚注:

脚注自动生成在页面最最后面,在页面末尾可以看到,并且脚注后方的链接可以直接跳转回到加脚注的地方。

代码示例:

脚注示例,这是第一个脚注[^注脚名1],这是第二个脚注[^注脚名2],这是第三个脚注[^注脚名3]
[^注脚名1]:我是脚注一.
[^注脚名2]:我是脚注二.
[^注脚名3]:我是脚注三.

示例效果:

脚注示例,这是第一个脚注,这是第二个脚注,这是第三个脚注

段落

换行

在Markdown 段落没有特殊的格式

  • 当需要内容换行时,使用两个以上空格加上回车。
  • 当需要生成新的段落,只需空出一行即可

多个空行只生效一个空行

代码示例:

上一行内容
下一行内容

上一个段落  

下一个段落

示例效果:

上一行内容

下一行内容

上一个段落

下一个段落

分隔符

在Markdown 分隔符需要使用 *-_ 来建立

  • *-_ 都需要三个及其以上
  • *-_ 可以在中间插入空格,但不能在行内存在其他内容
  • *-_ ,当前后都有段落时,请空出一行

代码示例:

---

- - -

___

_ _ _

***

* * *

示例效果:

_

_

列表

无序列表

列表内容前可使用 *-+ + 空格 来表示无序列表

代码示例:

- 无序列表项,使用 `-` + `空格`
+ 无序列表项,使用 `+` + `空格`
* 无序列表项,使用 `*` + `空格`

示例效果:

  • 无序列表项,使用 - + 空格
  • 无序列表项,使用 + + 空格
  • 无序列表项,使用 * + 空格

有序列表

列表内容前可使用 数字 + 空格 来表示有序列表

有序列表会自动给你的列表项按照阿拉伯数字顺序添加数字

代码示例:

1. 第一项
2. 第二项
4. 第三项

示例效果:

  1. 第一项
  2. 第二项
  3. 第三项

列表嵌套

子列表中的列表项前添加四个空格

代码示例:

1. 有序列表第一项 A
    - A 的第一项无序列表子项 a1
        1. a1 的第一项有序列表子项 a1a
        1. a1 的第二项有序列表子项 a1b
    - A 的第二项无序列表子项 a2
2. 有序列表第一项 B
    B 的第一行文本内容
    B 的第二行文本内容

示例效果:

  1. 有序列表第一项 A

    • A 的第一项无序列表子项 a1

      1. a1 的第一项有序列表子项 a1a
      2. a1 的第二项有序列表子项 a1b
    • A 的第二项无序列表子项 a2
  2. 有序列表第一项 B
    B 的第一行文本内容
    B 的第二行文本内容

区块引用

简单区块引用

在Markdown中使用 > + 空格 来表示区块引用

当需要换行时,可以在前方不加 >

需要新板块可以空出一行

代码示例:

> 换行可以不加 `>`
 我前面没有 `>`

> 如果需要新的一块,块引用则空出一行重新在文本前方使用 `>`

示例效果:

换行可以不加 >
我前面没有 >

如果需要新的一块,块引用则空出一行重新在文本前方使用 >

区块引用的嵌套

在Markdown中,区块引用也可以进行嵌套,只需使用多个 >

嵌套区块引用使用 > 的个数,代表着嵌套的深度

嵌套区块引用中 > 之间可以不用空格隔开

代码示例:

>> 第二层

> 第一层
> > 第二层

> 第一层
> > > 第三层

示例效果:

第二层

第一层

第二层

第一层

第三层

区块引用与列表

在Markdown中,列表里面可以使用区块引用,区块引用中也可以使用列表

列表还可以嵌套列表,区块引用还可以嵌套区块(本章只做简单介绍)

  • 列表中使用区块引用

代码示例:

1. 有序列表 A
    > 引用区块
    1. 有序列表 Aa
        > 引用区块
    > 区块
2. 有序列表 B 

示例效果:

  1. 有序列表 A

    引用区块

    1. 有序列表 Aa

      引用区块

  2. 有序列表 B
  • 区块引用中使用列表

代码示例:

> - 这序列表 A
> - 无序列表 B
>     * 子列表需要在 `>` 后面加入四个空格 

示例效果:

  • 这序列表 A
  • 无序列表 B

    • 子列表需要在 > 后面加入四个空格

代码

建议有输出内容的 Shell 命令前加上 $ ,不会把命令和输出的内容混淆

  • 代码段

代码段可以使用一对反引号\` \`包裹住

代码示例:

文本段中使用`代码段`,就用反引号包裹住

示例效果:

文本段中使用 代码段 ,就用反引号包裹住

  • 代码区块

    - 每行文字前加4个空格
      - 每行文字前加1个<kbd>tab</kbd>键
      - 使用三个反引号```包裹一段代码,在第一个```后面可以指定代码语言,显示代码高亮,也可以不指定语言

使用三个引号包裹代码块,引号是放在最前方

代码示例:

    我是使用4个空格,形成的代码块
    我是使用一个1个<kbd>tab</kbd>键,形成的恶代码块
markdown代码  
# 标题
1. 有序列表
```
___示例效果:___

---

    我是使用4个空格,形成的代码块
    我是使用一个1个<kbd>tab</kbd>键,形成的恶代码块

markdown代码

标题

  1. 有序列表

    ---
    
    ## 链接
    
    在Markdown中,链接可以使用到变量
  2. 简单链接

    [链接名称](链接网址)
    [链接名称](链接网址 "文字说明")
    <链接网址>
    

    文字说明可以通过鼠标悬浮链接上查看

    代码示例:

    百度[百度](https://www.baidu.com/)
    百度[百度](https://www.baidu.com/ "百度搜索")
    百度<https://www.baidu.com/>

    示例效果:

    百度 百度

    百度 百度

    百度 https://www.baidu.com/

  3. 高级链接

    可以使用变量来调用链接

    使用变量要记得在文档的结尾为变量赋值

    代码示例:

    [百度][1]
    [谷歌][2]

然后在文档的结尾为变量赋值(网址)

___示例效果:___

---

[百度][1]
[谷歌][2]

然后在文档的结尾为变量赋值(网址)

[1]: https://www.baidu.com/
[2]: http://www.google.com/

---


## 图片

跟链接的方法区别在于前面加了个感叹号 ` ! `

* `[图片上传失败...(image-caa9b7-1632883183326)]`
* `[图片上传失败...(image-4d432f-1632883183327)]`
* `你也可以像链接一样使用变量[百度][1].`

然后在文档的结尾位变量赋值(网址)

[1]: https://www.baidu.com/

__

___代码示例:___

![百度logo]]( https://www.baidu.com/img/PCt... )

百度

___示例效果:___

---

![百度logo](https://upload-images.jianshu.io/upload_images/26609212-9378a73477b77248.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![百度](https://upload-images.jianshu.io/upload_images/26609212-5240f8634959c454.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 "百度logo")

[百度][1]

[1]: https://www.baidu.com/

---

## 表格

在Markdown中 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔表头和其他行。

表格对齐放方式
* -: 设置内容和标题栏居右对齐。
* :- 设置内容和标题栏居左对齐。
* :-: 设置内容和标题栏居中对齐。

_表格对齐都是写在表头下面一行的 `----` 中_

___代码示例:___
表头一 靠左对齐 居中对其 靠右对齐
单元格1 单元格2 单元格3 单元格4
单元格11 单元格22 单元格33 单元格44
单元格111 单元格222 单元格333 单元格444
单元格1111 单元格2222 单元格3333 单元格4444
___示例效果:___

---

|  表头一   | 靠左对齐  |  居中对其  |   靠右对齐  |
| :----- | :-----| :----: | ----: |
| 单元格1 | 单元格2 | 单元格3 | 单元格4 |
| 单元格11 | 单元格22 | 单元格33 | 单元格44 |
| 单元格111 | 单元格222 | 单元格333 | 单元格444 |
| 单元格1111 | 单元格2222 | 单元格3333 | 单元格4444 |

---

## 目录

在需要目录出现的地方(一般在文章一开始)放置一个标记,这样会自动生成一个嵌套的包含所有标题的列表。

_如果对应的各级标题中有空格 , 在锚点链接中用`-`代替空格_

___代码示例:___

本文目录示例

  • 高级技巧

    注释

    在Markdown中,注释可以自定义

  • 可以使用html语法注释 <!--哈哈我是注释,不会在浏览器中显示。-->
  • 可以使用 *[·-·]:注释内容 格式进行注释,其中[]中的内容可以自定义

    这些注释在代码段中无效,代码块中注释是根据所指定语言进行注释

    代码示例:

*:注释,不会显示

*[@[email protected]]:注释,不会显示

___示例效果:___

---

下面写了注释,但不会被解析渲染出现,不同解析器支持的结果不同。
<!--注释,不会显示-->
[comment]: <> (注释,不会显示)
[//]: <> (注释,不会显示)
[//]: # (注释,不会显示)
*[^_^]:注释,不会显示
*[@[email protected]]:注释,不会显示
 
---

#### 支持的html元素

目前支持的 HTML 元素有:`<kbd> <b> <i> <em> <sup> <sub> <br>`等
_不在 Markdown 涵盖范围之内的标签,都可以直接在文档里面用 HTML 撰写。_

___代码示例:___

tab

粗体

斜体

也是斜体

文本 上标

文本 下标

换行

下一行

<details>

<summary>点击查看</summary>
这里是折叠的内容

</details>

还有很多其他html标签,这里就不一一列举了...

___示例效果:___

---

<kbd>tab</kbd>键
<b>粗体</b>
<i>斜体</i>
<em>也是斜体</em>
文本<sup>上标</sup>
文本<sub>下标</sub>
换行<br>下一行

<details>
    <summary>点击查看</summary>
    这里是折叠的内容
</details>
还有很多其他html标签,这里就不一一列举了...

---

#### 转义字符

在Markdown 中使用了很多特殊符号,如果需要显示特定的符号则需要使用转义字符。可以使用反斜杠`\`来转义

___Markdown反斜杠转义表___

| 转义字符 | 中文名称 |    英文名称 |
| :-----: | :-----:| :----: |
| \    | 反斜杠 | backslash    |
|`    | 反引号 | backtick    |
|*    | 星号 | asterisk |
|_    | 下划线 | underscore |
|{}    | 大括号 | curly braces |
|[]    | 方括号 | square brackets |
|()    | 括弧 | parentheses |
|#    | 井号 | hash mark |
|+    | 加号 | plus sign |
|-    | 减号(连字符)| minus sign (hyphen) |
|.    | 小数点 | dot |
|!    |感叹号| exclamation mark    |

___代码示例:___

\ 反斜线

\` 反引号

* 星号

\_ 下划线

{} 花括号

[] 方括号

() 小括号

\# 井字号

+ 加号

- 减号

. 英文句点

\! 感叹号

___示例效果:___

---

\\   反斜线
\`   反引号
\*   星号
\_   下划线
\{}  花括号
\[]  方括号
\()  小括号
\#   井字号
\+   加号
\-   减号
\.   英文句点
\!   感叹号