Markdown基础教程

作为程序员，如果你不清楚 Markdown 估计没人敢相信，毫不夸张地说，Markdown 是目前世界上最受欢迎的标记语言之一，所以今天我就带领大家初步了解一下 Markdown 的魅力，带你快速上手 Markdown

什么是 Markdown

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的文本格式编写文档，Markdown 文件的后缀名为 .md，有如下显著特点：

1.专注于文字内容2.纯文本，易读易写，可以方便地纳入版本控制3.语法简单，没有什么学习成本，能轻松在码字的同时做出美观大方的排版

为什么要使用 Markdown

很多小伙伴会有疑问，为什么要使用 Markdown 呢？其实，就当下互联网现状来看 Markdown 有如下 4 条显著特点

1.Markdown 无处不在。2.Markdown 是纯文本可移植的。3.Markdown 是独立于平台的。4.Markdown 能适应未来的变化。

常用的 Markdown 编辑器

这里我结合自身的使用经验，推荐大家使用 Typora 编辑工具，或者使用 VS Code 安装 Markdown All in One 插件后使用。

图片

图片

还是那句话，作为学习氪金就没有必要了，Typora 使用 beta 版本学习足够了

Typora 的优点不用多说，支持各种定制化，只要你的前端技能足够牛，你可以按照需要开发各种各样的主题，Typora 都能够很好的渲染出来。

VS Code 更不用多说，宇宙最强编辑器之一。推荐在 VS Code 中编辑 Markdown 的原因有两个：

1.不用再安装别其余的应用2.更好的在 Gitee 或者 GitHub 中渲染，因为一些网站或者开发平台为了安全考虑不会支持太多的渲染。

也就是说，不同的 Markdown 编辑器都有不同的特性，能够支持的渲染也不同

基础语法简介

标题

要创建标题，只需要在语句前面添加 # 即可，# 的数量代表了标题的级别。例如，添加四个 #，表示创建一个四级标题（例如 #### Header>）

Markdown 语法 HTML
# Header 1 <h1>Header 1</h1>
## Header 2 <h2>Header 2</h2>
### Header 3 <h3>Header 3</h3>
#### Header 4 <h4>Header 4</h4>
##### Header 5 <h5>Header 5</h5>
###### Header 6 <h6>Header 6</h6>

注意
还可以在文本下方添加任意数量的 == 号来标识一级标题，或者 – 号来标识二级标题
一般情况下，我们会考虑在 # 和标题之间添加一个空格

段落

要创建段落，只需要用空白行将一行或多行文本进行分隔即可

Markdown 语法 HTML
Hello world Coding change the world <p>Hello world</p> <p>Coding change the world</p>

注意
在编辑 Markdown 时，一般不建议使用空格（spaces）或制表符（ tabs）缩进段落

换行

要换行，一般使用 br 即可

强调

1.加粗，请在单词或短语的前后各添加两个星号（asterisks）或下划线（underscores）2.斜体，要用斜体显示文本，请在单词或短语前后添加一个星号（asterisk）或下划线（underscore）3.粗体和斜体同时使用，要同时用粗体和斜体突出显示文本，请在单词或短语的前后各添加三个星号或下划线

引用

1.要创建块引用，请在段落前添加一个 > 符号2.块引用可以嵌套。在要嵌套的段落前添加一个 >> 符号

注意
块引用可以包含其他 Markdown 格式的元素。并非所有元素都可以使用，你需要进行实验以查看哪些元素有效

列表

1.有序列表，在每个列表项前添加数字并紧跟一个英文句点。数字不必按数学顺序排列，但是列表应当以数字 1 起始2.无序列表，在每个列表项前面添加破折号 (-)、星号 (*) 或加号 (+) 。缩进一个或多个列表项可创建嵌套列表

代码

1.行内代码，要将单词或短语表示为代码，请将其包裹在反引号 () 中2.转义反引号，要表示为代码的单词或短语中包含一个或多个反引号，则可以通过将单词或短语包裹在双反引号()中3.代码块，要创建代码块，请将代码块的每一行缩进至少四个空格或一个制表符，或者将其包裹在三个反引号 (```) 中

分割线

要创建分隔线，请在单独一行上使用三个或多个星号 (***)、破折号 (—) 或下划线 (___) ，并且不能包含其他内容

链接

链接文本放在中括号内，链接地址放在后面的括号中，链接 title 可选

超链接 Markdown 语法代码：[超链接显示名](超链接地址 "超链接 title")

图片

要添加图像，请使用感叹号 (!), 然后在方括号增加替代文本，图片链接放在圆括号里，括号里的链接后可以增加一个可选的图片标题文本

插入图片 Markdown 语法代码：![图片alt](图片链接 "图片 title")

注意
如果要给图片增加链接，请将图像的 Markdown 括在方括号中，然后将链接添加在圆括号中

转义字符语

要显示原本用于格式化 Markdown 文档的字符，请在字符前面添加反斜杠字符 \

需要特别注意的是，在 Markdown 的块级元素和内联元素中， < 和 & 两个符号都会被自动转换成 HTML 实体，这项特性让你可以很容易地用 Markdown 写 HTML

内嵌 HTML 标签

对于 Markdown 涵盖范围之外的标签，都可以直接在文件里面用 HTML 本身。如需使用 HTML，不需要额外标注这是 HTML 或是 Markdown，只需 HTML 标签添加到 Markdown 文本中即可

Markdown 高级使用教程

注意

并非所有 Markdown 应用程序都支持扩展语法元素。您需要检查您的应用程序所使用的轻量级标记语言是否支持您要使用的扩展语法元素。如果没有，那么仍然有可能在 Markdown 处理器中启用扩展，本节我们以 Typora 作为 Markdown 编辑器来讲解

表格

创建表格

要添加表，可以使用三个或多个连字符（---）创建每列的标题，并使用管道（|）分隔每列。

Markdown 代码如下：

1
2
3
4
| 表头1 | 表头2 | 表头3 |
| --- | --- | --- |
| data10 | data20 | data30 |
| data11 | data21 | data31 |

显示效果如下：

表头1 表头2 表头3
data10 data20 data30
data11 data21 data31

如果您觉得通过代码直接创建表格比较麻烦，那么我们也可以通过，Markdown 编辑器右键直接插入表格，也能设置对齐方式

图片

对齐方式

我们还可以通过在标题行中的连字符的左侧，右侧或两侧添加冒号（ : ），将列中的文本对齐到左侧，右侧或中心

Markdown 代码如下：

1
2
3
4
| 表头1 | 表头2 | 表头3 |
| :--- | :---: | ---: |
| data10 | data20 | data30 |
| data11 | data21 | data31 |

运行效果如下：

表头1 表头2 表头3
data10 data20 data30
data11 data21 data31

特别注意

我们可以在表格中设置文本格式。例如，您可以添加链接，代码（仅反引号（`）中的单词或短语，而不是代码块）和强调
我们不能添加标题，块引用，列表，水平规则，图像或 HTML 标签

代码块

创建代码块

我们可以通过把行缩进四个空格或一个制表符来创建代码块，也可以通过在代码块的前后使用三个反引号（```）或者三个波浪线（~~~）来创建代码块

Markdown 代码如下：

1
2
3
4
5
6
```
{
    "name": "Typora",
    "version": "beta"
}
```

运行效果：

1
2
3
4
{
    "name": "Typora",
    "version": "beta"
}

语法高亮

Typora 处理器支持代码块的语法突出显示，我们只需要在代码块的前三个反引号后面写上语言即可

Markdown 代码如下：

1
2
3
4
5
6
```json
{
    "name": "Typora",
    "version": "beta"
}
```

运行效果如下：

1
2
3
4
{
    "name": "Typora",
    "version": "beta"
}

特别注意

不同的 Markdown 编辑器支持的代码高亮的语言种类不同，这边可以根据实际效果确认
Markdown 被渲染到浏览器上时，不同的浏览器所能支持的语言也不同，也需要根据实际效果确认

脚注

脚注使您可以添加注释和参考，而不会使文档正文混乱。当您创建脚注时，带有脚注的上标数字会出现在您添加脚注参考的位置。读者可以单击链接以跳至页面底部的脚注内容

创建脚注

在方括号（[^1]）内添加插入符号和标识符。标识符可以是数字或单词，但不能包含空格或制表符。标识符仅将脚注参考与脚注本身相关联在输出中，脚注按顺序编号。在括号内使用另一个插入符号和数字添加脚注，并用冒号和文本（[^1]:footnote）。

Markdown 代码如下：

1
2
3
4
5
脚注1[^1] 脚注2[^a]

[^1]: 这里是脚注 1 的解释

[^a]: 这里是脚注 2 的解释

运行效果：

脚注1[^1] 脚注2[^a]

[^1]: 这里是脚注 1 的解释
[^a]: 这里是脚注 2 的解释

特别注意

并非所有的地方都能放置脚注，除列表，块引号和表之类的其他元素之外的任何位置

任务列表

任务列表使您可以创建带有复选框的项目列表。在支持任务列表的 Markdown 应用程序中，复选框将显示在内容旁边。要创建任务列表，请在任务列表项之前添加破折号 - 和方括号 [ ]，并在 [ ] 前面加上空格。要选择一个复选框，请在方括号 [x] 之间添加 x

Markdown 代码如下：

1
2
3
- [x] Action 1
- [ ] Action 2
- [ ] Action 3

运行效果：

• Action 1• Action 2• Action 3

删除线

我们可以通过在单词中心放置一条水平线来删除单词。此功能使您可以指示某些单词是一个错误，要从文档中删除。若要删除单词，请在单词前后使用两个波浪号 ~~

Markdown 代码：

1
~~Hi Jeremy~~

运行效果：

Hi Jeremy

Emoji 表情

我们可以在 Markdown 编辑时通过复制粘贴的方式添加表情，或者通过表情码添加表情（表情码的前后需要分别添加一个冒号）

Markdown 代码：

1
:rocket:

运行效果：

:rocket:

特别注意

不同的 Markdown 编辑器支持的表情不同，这边可以根据实际效果确认
Markdown 被渲染到网站时，不同的浏览器、网站所能支持的表情也不同，也需要根据实际效果确认

完后总结了一下几乎所有的 emoji 表情，放置在了 GitHub 仓库，大家可以按需下载看一下

GitHub 仓库：https://github.com/JeremyWu917/Github-Markdown-Emojis

高级语法

下面还有一些更加高级的语法，我这边就不详细展开了，大家可以根据需要自己学习一下

公式

Markdown 语法：

1
2
3
$$    
xxxxxxxxxx6 1\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix} 2\mathbf{i} & \mathbf{j} & \mathbf{k} \\3\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\4\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0 \\5\end{vmatrix}6${$tep1}{\style{visibility:hidden}{(x+1)(x+1)}}
$$

运行效果：

图片

横向流程图

Markdown 语法：

1
2
3
4
5
6
graph LR
A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[横向流程图]

运行效果：

图片

竖向流程图

Markdown 语法：

1
2
3
4
5
6
graph TD
A[方形] --> B(圆角)
    B --> C{条件a}
    C --> |a=1| D[结果1]
    C --> |a=2| E[结果2]
    F[竖向流程图]

运行效果：

图片

标准流程图

Markdown 语法：

1
2
3
4
5
6
7
8
9
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op

运行效果：

图片

横向标准流程图

Markdown 语法：

1
2
3
4
5
6
7
8
9
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

运行效果：

图片

UML 时序图 1

Markdown 语法：

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

运行效果：

图片

UML 时序图 2

Markdown 语法：

1
2
3
4
5
6
7
8
9
10
11
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 标准时序图

Markdown 语法：

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

运行效果：

图片

甘特图

Markdown 语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
%% 语法示例
        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2014-01-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h

运行效果：

图片

特别注意

不同的 Markdown 编辑器支持的不同，这边可以根据实际效果确认
Markdown 被渲染到网站时，不同的浏览器、网站所能支持的也不同，也需要根据实际效果确认

自定义样式

您可以利用 HTML、CSS 在 Markdown 编辑器中实现各种各样的样式，我这边举个卡片的例子，旨在抛砖引玉

Markdown 语法：

1
2
3
4
5
6
7
8
9
10
<section style="margin: auto; width:300px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); text-align: center; border-radius: 10px; box-shadow: 04px8px0rgba(0, 0, 0, 0.2), 06px20px0rgba(0, 0, 0, 0.19); box-shadow: 0 0 20px #a812ff;">
   <img style="width:20%; height:20%;" src="https://gitee.com/jeremywuiot/img-res-all/raw/master/src/iie_shop/tack_purple_128x128.png"/>
   <img src="https://gitee.com/jeremywuiot/img-res-all/raw/master/src/iie_shop/logo_05.png" style="width:100%; border: 1px solid #eee"/>
      <br>
      <img style="width:15%; height:15%; position: relative; top: 5px;left: 0px;" src="https://gitee.com/jeremywuiot/img-res-all/raw/master/src/iie_shop/tada.gif" />
      <section style="padding: 1px;">
         <p style="font-size:12px; color: #a812ff">小城故事🎉</p>
         <p style="font-size:12px; color: #a812ff">小城故事🙌</p>
      </section>
</section>