Markdown语法入门

前言

本篇文章主要分享本人的学习过程，也是为了给自己记个笔记。一步一步学习Markdown语法，一步一步完善笔记，加油！！！

一、Markdown介绍

MarkDown介绍

• Markdown 是一种轻量级「标记语言」。它使我们专心于码字，用「标记」语法，来代替常见的排版格式。
• Markdown 允许人们使用易读易写的纯文本格式编写文档，编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。
• Markdown 编写的文档后缀为 .md, .markdown。

Markdown 编辑工具按照 Markdown 编辑器的使用环境，可以将它们归纳为三类.

• 平台集成工具：各大在线博客、社区平台自带的写作工具，比如 CSDN、博客园、GitHub 等。
• 独立软件类：下载到自己机器上使用的独立产品，可以编辑本地文件，比如 Typora (好用！！)。
• 插件类：它自己本身是不能独立使用的，可在你现有的编辑器中安装，使你现有的编辑器具有Markdown的功能，比如 WebStorm、Sublime Text 等。

二、基本语法

1、快捷键

---

（因各编辑器差异，具体键位视实际使用的编辑器设置为准）

功能	快捷键参考
撤销	Ctrl+Z
重做	Ctrl+Y
标题	Ctrl+1~6
加粗	Ctrl+B
斜体	Ctrl+I
有序列表	Ctrl+Shift+O
无序列表	Ctrl+Shift+U
待办列表	Ctrl+Shift+C
引用	Ctrl+Q
插入代码	Ctrl+Shift+K
插入链接	Ctrl+Shift+L
插入图片	Ctrl+Shift+G
分割线	Ctrl+R
查找	Ctrl+F
替换	Ctrl+G

2、标题

---

创建标题，只要在标题文本前添加 1~6个 # 字符即可，使用的 #数量 将决定标题的大小，总共六级标题。建议在#号后加一个 空格，这是最标准的 Markdown 语法。

# 标题1
## 标题2
### 标题3
#### 标题4
##### 标题5
###### 标题6

注意：

• 最后一个#字符与标题中间留一个空格
• 标题应该置于行首，如果放入表格中可能无法正确解析

3、文本样式

---

• 强调文本

代码	效果
*这是斜体*	这是斜体
_这是斜体_	这是斜体
**这是粗体**	这是粗体
__这是粗体__	这是粗体
***这是粗斜体***	这是粗斜体
___这是粗斜体___	这是粗斜体
==标记文本==	标记文本
~~删除文本~~	删除文本

• 键盘文本
  使用 HTML 的 <kbd> 标签。
  格式：
  加粗：<kbd>Ctrl/Command</kbd> + <kbd>B</kbd>
  斜体：<kbd>Ctrl/Command</kbd> + <kbd>I</kbd>
  效果：
  加粗：Ctrl/Command + B
  斜体：Ctrl/Command + I

4、换行

Markdown换行的方式有很多种:

• 两句话之间加一个空行
• 如果你在编辑的时候，想让一行文字在显示的时候换行，就在中间加 <br/>

5、引用

Markdown 中引用通过符号 > 来实现。> 符号后的空格，可有可无。
在引用的区块内，允许换行存在，换行并不会终止引用的区块。如果要结束引用，需要一行空白行，来结束引用的区块。
代码：
>这是一个引用

效果:

这是一个引用

此外，引用还可以嵌套使用：
代码：

>这是一个引用：
>>这是一个引用的引用
>>>这是一个引用的引用的引用

效果：

这是一个引用：

这是一个引用的引用

这是一个引用的引用的引用

引用的区块中也可以包含其它Markdown元素，包括标题、列表、代码块等。
输入示例：

> ## 引用
>
> 1. 有序列表1
> 2. 有序列表2
>
> - 无序列表
>     - 无序列表
>
> 代码示例：
>
>     use the printf() function; 

效果：

引用

1. 有序列表1
2. 有序列表2

• 无序列表
  • 无序列表

代码示例：

use the printf() function;

6、代码

在代码块中，符号& 和尖括号(<和>) 会被自动转换为HTML实体。这使得使用Markdown包含HTML源代码变得非常容易——只需粘贴并缩进它，Markdown就可以对特殊字符自动转义，减免了处理编码特殊字符的麻烦。

代码片 (内联代码块)
引用代码时，如果引用的语句只有一段，仅作为普通段落中的代码，可使用 1个反引号 ` 将其包起来。反引号中的文本不会被格式化。

例如：
Use the `printf()` function;

效果：Use the printf() function;

代码块 (围栏代码块)
引用代码时，如果引用的语句为多行，可以使用 3个反引号 ` 置于代码的首行和末行。

例如：

\```
Use the  printf() function;
Use the  printf() function;
\```

效果：

Use the  printf() function;
Use the  printf() function;

语法高亮
要将代码或文本格式化为各自的不同块，可使用 3个反引号 ` 包裹一段代码，并在首行反引号后面指明 语言标识符。

\```[语言标识符]
  在这里插入代码
\```

例如：

\```c
  // An highlighted block
  var foo = "bar";
\```

效果：

  // An highlighted block
  var foo = "bar";

Diff 语法
此外，Markdown 还支持 Diff 高亮语法，其格式如下

diff var foo = ‘bar’; - var x = 200; + var x = 100;

var foo = 'bar';
+ var x = 200;
* var x = 100;

需要注意的是，如果差异内容中包 ，请确保使用反斜杠\ 来转义每个反引号 ，否则差异突出显示将无法正确呈现。

7、插入链接

Markdown支持两种链接样式：行内链接 和 参考链接。在这两种样式中，链接文字都是用 方括号 []来标记。链接和图像使用方式相同。

行内链接

行内形式的链接是在方括号[]里输入可点击链接文字，后面接括号()并插入网址链接即可，如果你还想要加上链接的 alt提示文字，只要在网址后面键入空格，然后用双引号把 alt 文字包起来即可，其格式为:
[内容](http_url "alt 提示")
alt提示文字可用 双引号""（推荐）、单引号'' 或 小括号() 包围起来。

例如：

This is [a blog](https://blog.csdn.net/m0_65988427) inline link.
[This link](http://example.com/“CSDN”) is worth collecting.

效果：
This is a blog inline link.
This blog is worth collecting.

如果你引用的是同一路径下的本地资源，可以使用相对路径：
比如：This is my [blog](/blog/).
效果：This is my blog.

参考链接

参考形式的链接使用另外一个方括号[]接在链接文字的方括号[]后面，而在第二个方括号里面要填入用以辨识链接的标签id：

[CODE CHINA][1]能够结合云原生技术为 开源技术的教学、学习提供一站式学习、练习的引擎，通过教学培训场景

CODE CHINA能够结合云原生技术为 开源技术的教学、学习提供一站式学习、练习的引擎，通过教学培训场景

也可以选择性地在两个方括号中间加上空白：

[CODE CHINA] [1]能够结合云原生技术为 开源技术的教学、学习提供一站式学习、练习的引擎，通过教学培训场景

[CODE CHINA] 1能够结合云原生技术为 开源技术的教学、学习提供一站式学习、练习的引擎，通过教学培训场景

接着，在文档的任意处，可以把这个标签的链接内容按照格式填写好，其格式为[标签id]: 网址 "alt提示文字"
这里用到的标签的链接内容为：
[1]: https://codechina.csdn.net/courses?utm_source=explore "CODE

链接网址也可以用方括号包起来：
[1]: <https://codechina.csdn.net/courses?utm_source=explore> "CODE CHINA 学习广场"

你也可以把 alt 属性放到下一行，也可以加一些缩排，网址太长的话，这样会比较好看：
[1]: https://codechina.csdn.net/courses?utm_source=explore "CODE CHINA 学习广场"

网址定义只有在产生链接的时候用到，并不会直接出现在文档之中。

链接辨识标签可以有字母、数字、空白和标点符号，但是并不区分大小写，因此下面两个链接是一样的：

[link text][a]
[link text][A]

默认的链接标签功能让你可以省略指定链接标签id，这种情形下，链接标签和链接文字会视为相同，要用默认链接标签只要在链接文字后面加上一个空的方括号[],比如如果要让 “Google” 链接到 google.com，可以简化成：

[Google][]
[Google]: http://google.com/

Google

链接的定义可以放在文档中的任何一个地方，建议直接放在链接出现段落的后面，也可以把它放在文档最后面。

自动链接

Markdown支持以比较简短的自动链接形式来处理URL和电子邮件地址：只需用 尖括号 <>环绕URL/电子邮件地址 即可，Markdown 就会自动把它转成链接。
比如：<https://blog.csdn.net/m0_65988427>
效果：https://blog.csdn.net/m0_65988427

8、图片

插入图片与插入链接的语法很像，区别在一个!号

链接： [链接标题文字](URL地址 "alt提示文字")
图像：![链接标题文字](URL地址 "alt提示文字")

例如：

• 链接: [link](https://www.csdn.net/).
  链接: link.

• 图片: ![Alt](https://i-blog.csdnimg.cn/blog_migrate/2c5626d1121945cb84be5bc1cdd2de45.gif)
  效果：

• 带尺寸的图片:
  ![Alt](https://i-blog.csdnimg.cn/blog_migrate/2c5626d1121945cb84be5bc1cdd2de45.gif =30x30)
  这里=303x0表示尺寸
  效果：

• 居中的图片:
  ![Alt](https://i-blog.csdnimg.cn/blog_migrate/2c5626d1121945cb84be5bc1cdd2de45.gif#pic_center)
  效果：

• 居中并且带尺寸的图片:
  ![Alt](https://i-blog.csdnimg.cn/blog_migrate/2c5626d1121945cb84be5bc1cdd2de45.gif#pic_center =30x30)
  效果：

9、列表

Markdown 支持有序列表、无序列表和任务列表三种形式的列表。

无序列表
无序列表使用 * 、 + 或是 - 作为列表标记，比如：
* 香蕉 * 苹果 * 桃子
等同于：
+ 香蕉 + 苹果 + 桃子
也等同于：
- 香蕉 - 苹果 - 桃子
效果：

• 香蕉
• 苹果
• 桃子

有序列表
有序列表则使用数字接着一个英文句号.：

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

当然，项目列表很可能会不小心产生，像是下面这样的写法：

1987. What a great season. 1987. What a great season.

也就是当在行首出现数字-句点-空白的内容时，Markdown 会将其当做一个列表进行展示，要避免这样的状况，可以在句点前面加上转义符 \ ，比如：
\1986. What a great season.
Markdown 支持在下面这些符号前面加上反斜杠来帮助插入普通的符号：

` 反引号 
* 星号 
_ 底线 
{} 大括号 
[] 方括号 
() 括号 
# 井字号 
+ 加号 
+ - 减号 
+ . 英文句点 
+ ! 惊叹号

此外，列表也可以进行嵌套或者与其他 Markdown 内容，如果想要控制列表的层级，则需要在列表符号前使用Tab比如：
代码：

+ 无序列表 1
+ 无序列表 2
	+ 无序列表 2.1
	+ 无序列表 2.2

1. 有序列表 1
	1.1 有序列表 1.1
2. 有序列表 2
	2.1 有序列表2.1

效果：

• 无序列表 1
• 无序列表 2
  • 无序列表 2.1
  • 无序列表 2.2

1. 有序列表 1
   1.1 有序列表 1.1
2. 有序列表 2
   2.1 有序列表2.1

任务列表
任务列表的语法格式为 - [ ] todo，其中 [ ] (带空格的中括号)表示未完成的任务，[x](带字母x的中括号) 表示已经完成的任务，比如：

- [x] 起床
- [x] 吃饭
- [x] 工作
- [ ] 睡觉

• 起床
• 吃饭
• 工作
• 睡觉

任务列表页可以与无序列表或有序列表嵌套使用，比如：
代码：

- [x] 起床
	- [ ] 吃饭
		- [x] 煮鸡蛋
		- [ ] 烤面包
		- [ ] 热牛奶
- [X] 工作
		- [x] 看邮件
		- [x] 写代码
		- [ ] 发布
- [ ] 睡觉

效果

• 起床
  • 吃饭
    • 煮鸡蛋
    • 烤面包
    • 热牛奶
• 工作
  • 看邮件
  • 写代码
  • 发布
• 睡觉

自定义列表
使用自定义列表前代码需要与上一行空一行
代码：

Markdown
:  Text-to-HTML conversion tool

Authors
:  John
:  Luke

效果：

Markdown

Text-to-HTML conversion tool

Authors

John

Luke

10、分割线

Markdown中给出了多种分割线的样式，我们可以使用分割线让文章结构更加的清晰。
分割线的使用，可以在一行中用三个-、*、_来建立一个分割线，但是注意：在分割线的上面空一行！！！否则会导致前一行字体放大。

代码：

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

分割线：

---

---

---

---

11、表格

表格使用|来分割不同的单元格，使用-来分隔表头和其他行
:-：将表头及单元格内容左对齐
-:：将表头及单元格内容右对齐
:-:：将表头及单元格内容居中
代码：

| 项目        | 价格   |  数量  |
| --------   | -----:  | :----:  |
| 计算机     | \$1600 |   5     |
| 手机        |   \$12   |   12   |
| 管线        |    \$1    |  234  |

项目	价格	数量
计算机	$1600	5
手机	$12	12
管线	$1	234

12、注脚

脚注是对文本的备注，我们经常在论文中看到注脚，在Markdown中的使用方法:
一个具有注脚的文本。¹

使用 Markdown[^1]可以效率的书写文档, 直接转换成 HTML[^2], 你可以使用 Typora[^T] 编辑器进行书写。
[^1]:Markdown是一种纯文本标记语言
[^2]:HyperText Markup Language 超文本标记语言
[^T]:NEW WAY TO READ & WRITE MARKDOWN.

效果：
使用 Markdown¹可以效率的书写文档, 直接转换成 HTML², 你可以使用 Typora³ 编辑器进行书写。

注意：脚注自动被搬运到最后面，请到文章末尾查看，并且脚注后方的链接可以直接跳转回到加注的地方。

13、LaTeX数学公式

当你需要在编辑器中插入数学公式时，可以使用 2个美元符 $ 包裹 TeX 或 LaTeX 格式的数学公式来实现。比如：
代码：

Gamma公式
$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$
质能方程
$$E=mc^2$$

Gamma公式
$$\Gamma (z)={\int }_0^{\infty }{t}^{z-1}{e}^{-t}dt.$$
质能方程
$$E=m{c}^2$$
上标和下标：上标使用符号 ^ 包围、下标使用符号~ 包围。编辑器不支持时，可分别使用 HTML 标签 <sup>（superscript）和 <sub>（subscript）替代。

14、甘特图

参考文档
代码：

---

```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section 现有任务
已完成 :done, des1, 2014-01-06,2014-01-08
进行中 :active, des2, 2014-01-09, 3d
计划中 : des3, after des2, 5d
```

---

效果：

15、UML图

参考文档
代码：

---

```mermaid
sequenceDiagram
张三 ->> 李四: 你好！李四, 最近怎么样?
李四–>>王五: 你最近怎么样，王五？
李四–x 张三: 我很好，谢谢!
李四-x 王五: 我很好，谢谢!
Note right of 王五: 李四想了很长时间, 文字太长了
不适合放在一行.

李四–>>张三: 打量着王五…
张三->>王五: 很好… 王五, 你怎么样?
```

---

效果：

16、流程图

Mermaid流程图
参考文档
代码：

---

```mermaid
graph LR
A[长方形] – 链接 --> B((圆))
A --> C(圆角长方形)
B --> D{菱形}
C --> D
```

---

效果：

Flowchart流程图
参考文档
代码：

---

```mermaid
flowchat
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认？

st->op->cond
cond(yes)->e
cond(no)->op
```

---

效果：

17、类图

参考文档
代码：

---

```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
<> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
>>service>>
int id
size()
}
```

---

效果：

18、Html

Markdown支持原生HTML语法，譬如，你可以用 Html 写一个纵跨两行的表格：
代码：

<table>
    <tr>
        <th rowspan="2">值班人员</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
    </tr>
    <tr>
        <td>李强</td>
        <td>张明</td>
        <td>王平</td>
    </tr>
</table>

效果：

值班人员	星期一	星期二	星期三
	李强	张明	王平

也可以实现对字体格式的改变

代码：
<font face="楷体" color=#00ffff size=5>改变文字格式</font>
效果：
改变文字格式

19、居中

标题居中

代码：
<h1 align = "center">标题居中的方法</h1>

⚠️此处h1表示markdown中的一级标题，最多支持6级标题，根据自己的需要将其修改为h1…h6。
⚠️使用时将需要居中的标题替换标签内的文本即可。

文本居中

代码：
第一种：<center>这里输入要居中改的字体</center>
第二种：<div align = "center">这里输入要居中改的字体</div>
效果：

这里输入要居中改的字体

这里输入要居中改的字体

---

1. Markdown是一种纯文本标记语言 ↩︎ ↩︎

2. HyperText Markup Language 超文本标记语言 ↩︎

3. NEW WAY TO READ & WRITE MARKDOWN ↩︎