上读

MarkDown语法 超详细教程

【按】 Markdown人人都该学，但真正掌握就不容易了。这个教程适合所有人。

MD语法教程，适合新手入门，也适合老手瞅瞅 初稿写了一周左右，前前后后又修改了一个多月 应该是比较完善了

Mermaid ，iframe ， Latex 部分 在论坛里显示有问题 可以去 网页发布版 或 MD源文件 获得最佳阅读体验

本教程有发布publish上 Markdown 超级教程by成雙醬 2.1k

需要原 MD文档 和 PDF 的，可以戳下面的网盘链接

百度网盘： 链接：https://pan.baidu.com/s/13ZoKSRZkqQc_JuxK3AGFmA 2.1k 提取码：tqp8

阿里云盘： 链接：https://www.aliyundrive.com/s/eooT6xPzLhh 1.6k

以下是教程内容

什么是 Markdown?

  1. Markdown 是一款轻量级标记语言，不同于HTML (Hypertext Markup Language)，Markdown 的语法非常简单 且 容易上手

  2. Markdown 以 纯文本格式 编写文档，依赖键盘而非鼠标，专注于写作本身，感受书写的魅力

  3. Markdown 的通过添加一些简单的 标识符，让文本具有恰到好处的格式

  4. Markdown 核心特征就是 删繁剪芜， 简扼 **+ **精炼

  5. Markdown 是 笔记 与 网页文章 的最佳载体

  6. Down

    的核心：坐

    下

    来，就能把思维写

    下

    来

    • 牛津高阶英汉双解词典第九版 中，关于 down 的释义：

牛津9down释义

Markdown 相关软件推荐

Markdown 语法

1. 标题&目录

1.1 标题

这是一段普通的文本

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

1.2 目录

输入下方内容会生成一个目录：

[toc]

2. 斜体&粗体

2.1 斜体

这是一段普通文本

*这里一段斜体文本*
_这也是一段斜体文件_

2.2 粗体

这是一段普通文本

**这里是一段加粗文本**
__这也是一段加粗文本__

2.3 粗斜体 (斜粗体)

这是一段普通文本

***粗斜体文本1***
___粗斜体文本2___
**_粗斜体文本3_**
*__粗斜体文本5__*
_**粗斜体文本6**_

2.4 斜体包含粗体

这是一段普通文本

*这是一段斜体中**包含粗体**的文字*
_这也一段斜体中**包含粗体**的文字_
*这又是一段斜体中__包含粗体__的文字*
_这还是一段粗体中**包含粗体**的文字_

2.5 粗体包含斜体

这是一段普通文本

**这是一段粗体中*包含斜体*的文字**
__这也是一段粗体中_包含斜体_的文字__
**这又是一段粗体中_包含斜体_的文字**
__这还是一段粗体中*包含斜体*的文字__

3. 线

3.1 水平分割线

下面是一条水平分割线：
---
***

示范

3.2 文本删除线

  ~~这是一段加了删除线的文本~~

3.3 文本下划线

<u>这是一段加了下划线的文本</u>

示范

这是一段加了下划线的文本

4. 列表&引用

4.1 有序列表

1. 这是第一个有序列表 <!-- (Enter) -->
2. 这是第二个有序列表 <!-- (Enter) -->
3. 这是第三个有序列表 


1. 这是第一个有序列表 <!-- (Shift + Enter) -->
   这是同个列表下，另起一行的文本内容 <!-- (Enter) -->
2. 这是第二个有序列表 <!-- (Shift + Enter) -->
   这是同个列表下，另起一行的文本内容

示范

  1. 这是第一个有序列表
  2. 这是第二个有序列表
  3. 这是第三个有序列表
  4. 这是第一个有序列表 这是同个列表下，另起一行的文本内容
  5. 这是第二个有序列表 这是同个列表下，另起一行的文本内容

补充

- 10.这是无序列表下，整十数排列的内容
- 20.这是无序列表下，整十数排列的内容
- 30.这是无序列表下，整十数排列的内容


- 100.这是无序列表下，整百数排列的内容
- 200.这是无序列表下，整百数排列的内容
- 300.这是无序列表下，整百数排列的内容

效果：

4.2 无序列表

- 这是第1个无序列表 <!-- (Enter) -->
- 这是第2个无序列表 <!-- (Enter) -->
- 这是第3个无序列表

- 这是第一个无序列表 <!-- (Shift + Enter) -->
  这是同个列表下，另起一行的文本内容
- 这是第二个无序列表 <!-- (Shift + Enter) -->
  这是同个列表下，另起一行的文本内容

示范

4.3 引用

>这是第一段引用文本的第1行 <!-- (Enter) -->
>这是第一段引用文本的第2行 <!-- (Enter) -->
<!-- (Enter) -->
>这是第二段引用文本的第1行 <!-- (Enter) -->
>这是第二段引用文本内第2行

示范

这是第一段引用文本的第1行 这是第一段引用文本的第2行

这是第二段引用文本的第1行 这是第二段引用文本的第2行

4.4 缩进&退格

在列表和引用的书写过程中，我们需要利用 缩进 与 退格 ，让文章肌理分明，更具层级

4.4.1 有序列表的缩&退

1. 第一级有序列表1 <!-- (Enter) -->
	1. 第二级有序列表1    <!-- 写文本之前，先( Tab 或 Ctrl + ] ) ；写完文本后，再(Enter) -->
	2. 第二级有序列表2 <!-- (Enter) -->
2. 第一级有序列表2    <!-- 写文本前，先 ( Shift + Tab 或 Ctrl + [ ) -->
示范
  1. 第一级有序列表1
    1. 第二级有序列表1
    2. 第二级有序列表2
  2. 第一级有序列表2

4.4.2 无序列表的缩&退

- 第一级无序列表1 <!-- (Enter) -->
	- 第二级无序列表1  <!-- 写文本前，先( Tab 或 Ctrl + ] ) ；写完后，再(Enter) -->
	- 第二级无序列表2 <!-- (Enter) -->
- 第一级无序列表2  <!-- 写文本前，先 ( Shift + Tab 或 Ctrl + [ ) -->
示范

4.4.3 引用的缩&退

>第一级引用1 <!-- (enter) -->
>>第二级引用1 <!-- 先打1个 > (这里的第一个 > 是会自动补充的，只需额外增补1个即可) ，再(enter) -->
>>第二级引用2 <!-- (enter) -->
>第一级引用2   <!-- 写文本前，先 ( Shift + Tab 或 Ctrl + [ ) -->
示范

第一级引用1

第二级引用1 第二级引用2

第一级引用2

Gif演示1：

引用退格1

Gif演示2：

引用退格2

4.4.4 有序&无序&引用 连续套娃

1. 第一级 有序列表1 <!-- (Shift + Enter) --> 
	- 第二级 无序列表1 <!-- (Shift + Enter) -->
		>第三级 引用1  <!-- (Enter) -->
			- 第四级 无序列表2 <!-- (Shift + Enter) -->
            	1. 第五级 有序列表2 <!-- (Enter) -->
            - 第四级 无序列表3   <!-- 写文本前，先( Shift + Tab 或 Ctrl + [ ) ；写完后再 (Enter) -->
        >第三级 引用2  <!-- 写文本前，先( Shift + Tab 或 Ctrl + [ ) ；写完后再 (Enter × 2) -->
    - 第二级 无序列表4  <!-- 写文本前，先( Shift + Tab 或 Ctrl + [ ) -->
2. 第一级 有序列表3  <!-- 写文本前，先( Shift + Tab 或 Ctrl + [ ) -->
示范

  1. 第一级 有序列表1

    • 第二级 无序列表1

      第三级 引用1

      • 第四级 无序列表2
        1. 第五级 有序列表2
      • 第四级 无序列表3

      第三级 引用2

    • 第二级 无序列表4

  2. 第一级 有序列表3

4.4.5 Obsidian 的一些缩退问题

- - 这是第一段就被缩进的列表
	- 这是第二段被再次缩进的列表  <!-- 这里需按两次 Ctrl + ] ,Tab键是无效的 -->
  - 这是第三段列表  <!-- Ctrl + [ -->

5. 网页链接与图像

5.1 网页链接

[显示文本内容](链接地址 "提示信息文本")

[百度一下，你就知道](http://www.baidu.com "按住Ctrl点击跳转百度")

示范：

百度一下，你就知道 438

5.2 图像

![文字信息](图片链接 "提示文本信息")	

![湘湖1](upload://Ad5F9UZAOlZkz4iRuGeEuRugdZ.jpeg "湘湖一角")

示范

湘湖1

湘湖一角1080×1440 198 KB

6. 表格

|这里是表头1|这里是表头2|这里是表头3|
|:-|:-:|-:|    <!--区分表头和表格主体，:代表文本对齐方式，分别是左对齐，居中对齐，右对齐-->
|单元格数据1|单元格数据2|单元格数据3|
|单元格数据4|单元格数据5|单元格数据6|

示范

这里是表头1 这里是表头2 这里是表头3
单元格数据1 单元格数据2 单元格数据3
单元格数据4 单元格数据5 单元格数据6

6.1 表格内文本内容的换行

如下图所示：

表头1 表头2
这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本 普通文本 
| 表头1 |  表头2 |
|:-:|:-:|
|这是第一行文本<br>这是另起一行的文本|普通文本|
示范
表头1 表头2
这是第一行文本 这是另起一行的文本 普通文本

7. 代码域

7.1 行内代码

`这是一段行内代码`

`<table border="1" cellspacing="0" width="500" height="500">`

`print("Hello, World!")`

`这是一行突出显示的文本内容`

示范

print("Hello, World!")
这是一行突出显示的文本内容

7.2 代码块

```语言种类
代码内容
代码内容
代码内容
```

下面是HTML代码块

```html
<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>
```

下面是CSS代码块

```css
.box {
	width: 600px;
	height: 400px;
	margin: 100px auto;
	background-image: linear-gradient(black 33.3%,red 33.3%, red 66.6%, yellow 66.6%, yellow);
}	
```

下面是JavaScript代码块

```js
    // 定义一个30个整数的数组，按顺序分别赋予从2开始的偶数；然后按顺序每五个数求出一个平均值，放在另一个数组中并输出。试编程
    var arr = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60]
    var newarr = [];
    for (var i = 0, count = 0, sum = 0, len = arr.length; i < len; i++) {
        sum += arr.shift();
        count++;
        if (count % 5 === 0) {
            newarr.push(sum / 5);
            sum =  0;
        }
    }
    console.log(newarr);

    var arr = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60]
    var newarr = [];
    for (var i = 0, len = arr.length; i < len / 5; i++) {
        var subarr = arr.splice(0, 5)
        for (var j = 0, sum = 0; j < subarr.length; j++) {
            sum += subarr[j];
        }
        newarr.push(sum / 5);
    }
    console.log(newarr);
```


下面是Python代码块

```python
#!/usr/bin/python
# -*- coding: UTF-8 -*-

i = 2
while(i < 100):
   j = 2
   while(j <= (i/j)):
      if not(i%j): break
      j = j + 1
   if (j > i/j) : print i, " 是素数"
   i = i + 1
 
print "Good bye!"
```

下面是一块突出显示的文本

```txt
这是一段
突出显示的
文本内容
```

示范

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>
.box {
	width: 600px;
	height: 400px;
	margin: 100px auto;
	background-image: linear-gradient(black 33.3%, red 33.3%, red 66.6%, yellow 66.6%, yellow);
}	
    // 定义一个30个整数的数组，按顺序分别赋予从2开始的偶数；然后按顺序每五个数求出一个平均值，放在另一个数组中并输出。试编程
    var arr = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60]
    var newarr = [];
    for (var i = 0, count = 0, sum = 0, len = arr.length; i < len; i++) {
        sum += arr.shift();
        count++;
        if (count % 5 === 0) {
            newarr.push(sum / 5);
            sum =  0;
        }
    }
    console.log(newarr);

    var arr = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60]
    var newarr = [];
    for (var i = 0, len = arr.length; i < len / 5; i++) {
        var subarr = arr.splice(0, 5)
        for (var j = 0, sum = 0; j < subarr.length; j++) {
            sum += subarr[j];
        }
        newarr.push(sum / 5);
    }
    console.log(newarr);
#!/usr/bin/python
# -*- coding: UTF-8 -*-

i = 2
while(i < 100):
   j = 2
   while(j <= (i/j)):
      if not(i%j): break
      j = j + 1
   if (j > i/j) : print i, " 是素数"
   i = i + 1
 
print "Good bye!"
这是一段
突出显示的
文本内容

8. 任务列表（待办）

- [ ] 待办任务列表1
- [ ] 待办任务列表2
- [x] 已办任务列表1    <!-- 英文字母X -->
- [x] 已办任务列表2

示范

示范

9. 注释

Markdown 的 注释 和 HMTL 一样，注释的内容在 渲染界面 不可见 （部分编辑器可见)

<!-- 这里是一行注释 -->

<!--
这里是
一段
假装有
很多行的
注释
-->

10. 变量

10.1 网页链接变量

[百度一下，你就知道][度娘]
[知乎-有问题，就会有答案][知乎]

<!-- 这里是变量区域 -->
[度娘]: http://www.baidu.com 
[知乎]: https://www.zhihu.com

示范

百度一下，你就知道 438

知乎-有问题，就会有答案 30

10.2 脚注

鲁迅原名是什么[^1] ，浙江哪里人[^2]

<!-- 这里是变量区域 -->
[^1]: 周树人
[^2]: 绍兴人

示范

鲁迅原名是什么^1 ，浙江哪里人^2

11. 拓展文本格式标记

11.1 键盘文本

11.2 放大文本

11.3 缩小文本

11.4 多彩文本

12. 拓展文本显示效果

12.1 文本高亮

12.2 上标

12.3 下标

12.4 Emoji 符号

13. 转义字符

例1

例2

|表头1|表头2|
|-|-|
|这里的文本被\|分隔|这里的文本也被\|分隔|
表头1 表头2
这里的文本被|分隔 这里的文本也被|分隔

例3

例4

在 网页链接 的 显示文本内容 中，使用 中括号 [ ]

例5

如下所示：

The Web, the Tree, and the String. 写作之难，在于把网状的思考，用树状结构，体现在线性展开的语句里。

The Web, the Tree, and the String. 写作之难，在于把网状的思考，用树状结构，体现在线性展开的语句里。 - 史蒂芬·平克

14. 空格&换行&强制删除

14.1 空格

14.2 换行

场景1：

这里第一段文本

<br><br><br><br><br>     <!-- 这里插入了5个空行间距 -->

这里是第二段文本

这里第一段文本

这里是第二段文本

场景2：

- 这是一段无序列表
  <br>     <!-- 插入一个空行间距，需单独一行，上下不用预留空格 -->
  这是同一段无序列表中，空一行距离显示的内容
- 这是第二段无序列表

效果：

14.3 强制删除

15. 嵌入

15.1 嵌入音频

<audio controls="controls" preload="none" src="https://www.ldoceonline.com/media/english/exaProns/p008-001803372.mp3?version=1.2.30"></audio>

15.2 嵌入视频

<video width="600" height="420" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">  
</video>

15.3 嵌入页面

<iframe width=600 height=400 src="https://www.runoob.com/html/html-tutorial.html" scrolling="auto" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

<iframe width=600 height=400 src="http://player.bilibili.com/player.html?aid=20190823&bvid=BV1yW411s7og&cid=32964980&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

16. Latex

16.1 行内公式

latex 行内公式

16.2 公式块

$$
$\ce{Zn^2+  <=>[+ 2OH-][+ 2H+]  $\underset{\text{amphoteres Hydroxid}}{\ce{Zn(OH)2 v}}$  <=>[+ 2OH-][+ 2H+]  $\underset{\text{Hydroxozikat}}{\ce{[Zn(OH)4]^2-}}$}$
$$

<!-- 麦克斯韦方程组 -->
$$
\begin{array}{lll}
\nabla\times E &=& -\;\frac{\partial{B}}{\partial{t}}   
\ \nabla\times H &=& \frac{\partial{D}}{\partial{t}}+J   
\ \nabla\cdot D &=& \rho
\ \nabla\cdot B &=& 0
\ \end{array}
$$

效果：

latex 公式块

latex 公式块974×282 57.9 KB

17. Mermaid

17.1 流程图

```mermaid
graph LR
emperor((朱八八))-.子.->朱五四-.子.->朱四九-.子.->朱百六
朱雄英--长子-->朱标--长子-->emperor
emperor2((朱允炆))--次子-->朱标
朱樉--次子-->emperor
朱棡--三子-->emperor
emperor3((朱棣))--四子-->emperor
emperor4((朱高炽))--长子-->emperor3
```

渲染：

mermaid 流程图

mermaid 流程图1108×561 87 KB

17.2 饼图

```mermaid
pie
    title 为什么总是宅在家里？
    "喜欢宅" : 45
    "天气太热" : 70
    "穷" : 500
	"关你屁事" : 95
```

渲染：

mermaid 饼图

mermaid 饼图965×587 74.9 KB

17.3 顺序图 (时序图)

```mermaid
sequenceDiagram
	%% 自动编号
	autonumber
	%% 定义参与者并取别名，aliases：别名
        participant A as Aly
        participant B as Bob
        participant C as CofCai
        %% 便签说明
        Note left of A: 只复习了一部分
        Note right of B: 没复习
        Note over A,B: are contacting
        
        A->>B: 明天是要考试吗？
        B-->>A: 好像是的！
        
        %% 显示并行发生的动作，parallel：平行
        %% par [action1]
        rect rgb(0, 25, 155)
            par askA
                C -->> A:你复习好了吗？
            and askB
                C -->> B:你复习好了吗？
            and self
                C ->>C:我还没准备复习......
            end
        end
        
        %% 背景高亮，提供一个有颜色的背景矩形
        rect rgb(25, 55, 0)
            loop 自问/Every min
            %% <br/>可以换行
            C ->> C:我什么时候<br/>开始复习呢？
            end
        end
        
        %% 可选择路径
        rect rgb(153, 83, 60)
            alt is good
                A ->> C:复习了一点
            else is common
                B ->> C:我也是
            end
            %% 没有else时可以提供默认的opt
            opt Extra response
                C ->> C:你们怎么不回答我
            end
        endsequenceDiagram
	%% 自动编号
	autonumber
	%% 定义参与者并取别名，aliases：别名
        participant A as Aly
        participant B as Bob
        participant C as CofCai
        %% 便签说明
        Note left of A: 只复习了一部分
        Note right of B: 没复习
        Note over A,B: are contacting
        
        A->>B: 明天是要考试吗？
        B-->>A: 好像是的！
        
        %% 显示并行发生的动作，parallel：平行
        %% par [action1]
        rect rgb(0, 25, 155)
            par askA
                C -->> A:你复习好了吗？
            and askB
                C -->> B:你复习好了吗？
            and self
                C ->>C:我还没准备复习......
            end
        end
        
        %% 背景高亮，提供一个有颜色的背景矩形
        rect rgb(25, 55, 0)
            loop 自问/Every min
            %% <br/>可以换行
            C ->> C:我什么时候<br/>开始复习呢？
            end
        end
        
        %% 可选择路径
        rect rgb(153, 83, 60)
            alt is good
                A ->> C:复习了一点
            else is common
                B ->> C:我也是
            end
            %% 没有else时可以提供默认的opt
            opt Extra response
                C ->> C:你们怎么不回答我
            end
        end
```

渲染：

mermaid 时序图

mermaid 时序图745×1312 91.4 KB

17.4 甘特图

```mermaid
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d
```

渲染：

mermaid 甘特图

mermaid 甘特图1452×289 63 KB