Markdown 语法详解及使用技巧

发表于 2021-08-19 更新于 2022-08-30 分类于学习笔记， Markdown Waline：本文字数： 13k 阅读时长 ≈ 12 分钟

Markdown 是一种轻量级的标记语言，可用于在纯文本文档中添加格式化元素。Markdown 由 John Gruber 于 2004 年创建，如今已成为世界上最受欢迎的标记语言之一。
本文详细记录了 Markdown 常用语法及使用技巧。

Markdown简介

Markdown 是一种轻量级标记语言，排版语法简洁，让人们更多地关注内容本身而非排版。它使用易读易写的纯文本格式编写文档，可与 HTML 混编，可导出 HTML、PDF 以及本身的 .md 格式的文件。且 Markdown 的语法十分简单，常用的标记符号不超过十个，用于日常写作记录绰绰有余，不到半小时就能完全掌握。但就是这十个不到的标记符号，却能让人优雅地沉浸式记录，专注内容而不是纠结排版，达到「心中无尘，码字入神」的境界。

Markdown基本语法速查表

这些是 John Gruber 的原始设计文档中列出的元素。所有 Markdown 应用程序都支持这些元素。

元素	Markdown语法	MarkdownPad2快捷键
标题（Heading）	`# H`	`Ctrl+1`
粗体（Bold）	`bold text`	`Ctrl+B`
斜体（Italic）	`italicized text`	`Ctrl+I`
引用块（Blockquote）	`> blockquote`	`Ctrl+Q`
有序列表（Ordered List）	`1. First item`	`Ctrl+Shift+O`
无序列表（Unordered List）	`- First item`	`Ctrl+U`
代码（Code）	`code`	`Ctrl+K`
分隔线（Horizontal Rule）	`---`	`Ctrl+R`
链接（Link）	`[title](https://www.example.com)`	`Ctrl+L`
图片（Image）	`![alt text](image.jpg)`	`Ctrl+G`

基本语法

标题（Heading）

创建标题：在单词或短语前面添加井号 (#) 。# 的数量代表了标题的级别。例如，添加三个 # 表示创建一个三级标题 (<h3>)： ### My Header 注意用一个空格在 # 和标题之间进行分隔。

标题的Markdown语法与HTML的对应关系如下：

Markdown语法	HTML
`# Heading level 1`	`<h1>Heading level 1</h1>`
`## Heading level 2`	`<h2>Heading level 2</h2>`
`### Heading level 3`	`<h3>Heading level 3</h3>`

注：最多只能添加六个 # ，即只能到六级标题，无七级标题。

也可以在文本下方添加任意数量的 == 号来标识一级标题，或者 -- 号来标识二级标题。
一级标题：
Heading level 1 =============== 二级标题：
Heading level 2 ---------------

段落（Paragraph）

创建段落：使用空白行将一行或多行文本进行分隔。注意不要用空格（spaces）或制表符（ tabs）缩进段落。
实现效果如下：

I really like using Markdown.

I think I'll use it to format all of my documents from now on

换行（Line Break）

在一行的末尾添加两个或多个空格，然后按回车键,即可换行(<br>)。
几乎每个 Markdown 应用程序都支持两个或多个空格进行换行，称为结尾空格（trailing whitespace) ，但因为很难在编辑器中直接看到空格所以颇有争议，且很多人都会有意或无意地在每个句子后面添加两个空格。因此，我们可以使用另一种换行方式：HTML 的<br>标签。
其实还有还有两种其他方式，但是为了确保兼容性，建议就使用行尾添加“结尾空格”或 HTML 的<br>标签的方式来实现换行。

强调语法：粗体（Bold）、斜体（Italic）

粗体（Bold）

加粗文本：在单词或短语的前后各添加两个星号（asterisks）或下划线（underscores）。
加粗一个单词或短语的中间部分：在要加粗部分的两侧各添加两个星号（asterisks）。

如下表：

Markdown语法	HTML	效果
`I love bold text.`	`I love <strong>bold text</strong>.`	I love bold text.
`I love __bold text__ .`	`I love <strong>bold text</strong>.`	I love bold text.
`tobeornottobe`	`tobe<strong>or</strong>nottobe`	tobeornottobe

斜体（Italic）

斜体显示文本：在单词或短语前后添加一个星号（asterisk）或下划线（underscore）。
斜体突出单词的中间部分：在字母前后各添加一个星号，中间不要带空格。

如下表：

Markdown语法	HTML	效果
`Italicized text is the cat's meow.`	`Italicized text is the <em>cat's meow</em>.`	Italicized text is the cat's meow.
`Italicized text is the _cat's meow_.`	`Italicized text is the <em>cat's meow</em>.`	Italicized text is the cat's meow.
`tobeornottobe`	`<em>tobe</em>or<em>nottobe</em>`	tobeornottobe

粗体（Bold）& 斜体（Italic）

要让文本又粗又斜，只需在单词或短语的前后各添加三个星号或下划线。要加粗并用斜体显示单词或短语的中间部分，则在要突出显示的部分前后各添加三个星号，中间不要带空格。

如下表：

Markdown语法	HTML	效果
`This text is *really important*.`	`This text is <strong><em>really important</em></strong>.`	This text is *really important*.
`This text is ___really important___.`	`This text is <strong><em>really important</em></strong>.`	This text is *really important*.
`This text is __really important__.`	`This text is <strong><em>really important</em></strong>.`	This text is *really important*.
`This text is _really important_.`	`This text is <strong><em>really important</em></strong>.`	This text is *really important*.
`This text is very*very*important.`	`This text is very<strong><em>very</em></strong>important.`	This text is veryveryimportant.

引用块（Blockquote）

单段落

创建引用块：在段落前添加一个 > 符号。

1 2	> To be or not to be

渲染效果如下：

To be or not to be

多段落

创建多个段落的块引用：除了在段落前添加一个 > 符号，还要在段落之间的空白行添加一个 > 符号

1
2
3

> "Il n'ya qu'un héroïsme au monde : c'est de voir le monde tel qu'il est et de l'aimer."
> 
>  Romain Rolland

渲染效果如下：

"Il n'ya qu'un héroïsme au monde : c'est de voir le monde tel qu'il est et de l'aimer."
Romain Rolland

嵌套

引用还可以嵌套：在要嵌套的段落前添加一个 >> 符号即可。

1
2
3

> Romain Rolland
> 
>>  "Il n'ya qu'un héroïsme au monde : c'est de voir le monde tel qu'il est et de l'aimer."

渲染效果如下：

Romain Rolland
"Il n'ya qu'un héroïsme au monde : c'est de voir le monde tel qu'il est et de l'aimer."

带有其它元素的块引用

块引用可以包含其他 Markdown 格式的元素。并非所有元素都能生效，可以自行实验哪些元素有效。
例如：

> #### The quarterly results look great!
>
> - Revenue was off the chart.
> - Profits were higher than ever.
>
>  *Everything* is going according to **plan**.

效果如下：

The quarterly results look great!
Revenue was off the chart.
Profits were higher than ever.
Everything is going according to plan.

注：引用块最好与上下文各隔一个空行

列表（List）

列表包括有序列表和无序列表。

有序列表

创建有序列表：在每个列表项前添加数字并紧跟一个英文句点和空格。数字无须按数学顺序排列，但是应当以数字 1 起始。
例如下面三个有序列表是等价的：

1. First item
2. Second item
3. Third item
4. Fourth item

1. First item
8. Second item
3. Third item
5. Fourth item

1. First item
1. Second item
1. Third item
1. Fourth item

效果如下：

First item
Second item
Third item
Fourth item

有序列表可进行嵌套：

1. First item
2. Second item
3. Third item
    1. Indented item
    2. Indented item
4. Fourth item

效果如下：

First item
Second item
Third item
1. Indented item
2. Indented item
Fourth item

无序列表

要创建无序列表，请在每个列表项前面添加破折号 (-)、星号 (*) 或加号 (+) ，同时不要忘记加上空格。
如下三个无序列表也是等价的：

- First item
- Second item
- Third item
- Fourth item

* First item
* Second item
* Third item
* Fourth item

+ First item
+ Second item
+ Third item
+ Fourth item

效果如下：

First item
Second item
Third item
Fourth item

无序列表同样可进行嵌套：

- First item
- Second item
- Third item
    - Indented item
    - Indented item
- Fourth item

效果：

First item
Second item
Third item
- Indented item
- Indented item
Fourth item

在列表中嵌套其他元素

要在保留列表连续性的同时添加其他元素，要将该元素缩进四个空格或一个制表符（Tab），如下所示：

段落

*   This is the first list item.
*   Here's the second list item.

    I need to add another paragraph below the second list item.

*   And here's the third list item.

渲染效果如下：

This is the first list item.
Here's the second list item.
I need to add another paragraph below the second list item.
And here's the third list item.

引用块

*   This is the first list item.
*   Here's the second list item.

    > A blockquote would look great below the second list item.

*   And here's the third list item.

渲染效果如下：

This is the first list item.
Here's the second list item.
A blockquote would look great below the second list item.
And here's the third list item.

代码块

代码块通常采用四个空格或一个制表符缩进。当把它们被放入列表中，则要将它们缩进八个空格或两个制表符。

1.  Open the file.
2.  Find the following code block on line 21:

        <html>
          <head>
            <title>Test</title>
          </head>

3.  Update the title to match the name of your website.

渲染效果如下：

Open the file.

Find the following code block on line 21:

<html>
  <head>
    <title>Test</title>
  </head>

Update the title to match the name of your website.

图片

1.  Open the file containing the Linux mascot.
2.  Marvel at its beauty.

    ![](https://fastly.jsdelivr.net/gh/reman2021/ImageHosting@main/zcw-blog-picture/linux.png)

3.  Close the file.

渲染效果如下：

Open the file containing the Linux mascot.
Marvel at its beauty.

Close the file.

列表

1. First item
2. Second item
3. Third item
    - Indented item
    - Indented item
4. Fourth item

渲染效果如下： 1. First item 2. Second item 3. Third item - Indented item - Indented item 4. Fourth item

代码

将代码放在在反引号 (`) 中，如果代码包含一个或多个反引号，则将其包裹在双反引号中：

Markdown语法	HTML	效果
At the command prompt, type `nano`.	`At the command prompt, type <code>nano</code>.`	At the command prompt, type `nano`.
``Use `code` in your Markdown file.``	<code>Use `code` in your Markdown file.</code>	Use `code` in your Markdown file.

代码块
创建代码块：将代码块的每一行缩进至少四个空格或一个制表符，效果如下：

<html>
  <head>
  </head>
</html>

个人觉得不如围栏代码块好看，且不用缩进，在拓展语法中会讲到。

分隔线（Horizontal Rule）

创建分隔线：在单独一行上使用三个及三个以上星号 (***)、破折号 (---) 或下划线 (___) 且不包含其他内容：

***

---

_________________

渲染效果：

注意在分隔线的前后均添加空白行

链接（Link）

超链接

超链接Markdown语法：[超链接显示名](超链接地址 "超链接title")
对应的HTML代码：<a href="超链接地址" title="超链接title">超链接显示名</a>
链接title是当鼠标悬停在链接上时会出现的文字，可以自行修改，它放在圆括号中链接地址的后面，跟链接地址之间以空格分隔。
例如：

1	我的博客链接：[ZCW_Blog](http://zcw-blog.top "不来看看吗")

渲染效果如下：
我的博客链接：ZCW_Blog

超链接居中

Markdown 本身并没有居中语法，不过我们可以利用 HTML 语法来实现超链接居中，只需将超链接放在<center></center>之间，需要注意的是在 MarkdownPad2 中要将链接与<center></center>各隔一个空行，否则链接会失效。
例如：

<center>

[ZCW_Blog](http://zcw-blog.top "不来看看吗")

</center>

效果如下：

ZCW_Blog

网址和 Email 地址

使用尖括号可以把 URL 或者 email 地址变成可点击的链接：

1 2	<http://zcw-blog.top> <a@example.com>

带格式化的链接

强调链接：在链接语法前后增加星号（*）。
将链接表示为代码：在方括号中添加反引号（`）。

1
2
3

我的博客链接： **[ZCW_Blog](http://zcw-blog.top "不来看看吗")**
我的博客链接： *[ZCW_Blog](http://zcw-blog.top "不来看看吗")*
我的博客链接：[`ZCW_Blog`](http://zcw-blog.top "不来看看吗")

渲染效果如下：
我的博客链接： ZCW_Blog
我的博客链接： ZCW_Blog
我的博客链接：ZCW_Blog

引用链接

引用样式链接是一种特殊的链接,作用是使 URL 在 Markdown 中更易于显示和阅读，它分为两个部分：

第一部分

使用两组括号进行格式设置。第一组方括号内显示为链接的文本。第二组括号包含一个标签，该标签用于指向存储在文档其他位置的链接。

1
2
3

[ZCW_Blog1][1]
[ZCW_Blog2][2]
[ZCW_Blog3][3]

第二部分

第二部分使用以下属性设置格式：
1. 放在括号中的标签，其后紧跟一个冒号和至少一个空格（例如[label]:）。
2. 链接的 URL ，可以选择将其括在尖括号中。
3. 链接的可选标题，可以将其括在双引号，单引号或括号中。
如下：

1
2
3

[1]: http://zcw-blog.top "不来看看吗"
[2]: <http://zcw-blog.top> '来看看吧'
[3]: http://zcw-blog.top （快来看！）

然后将以上标签放在文章的任意位置，如文末，这样在 Markdown 编辑文章的时候链接的显示就会变得更加简洁。
渲染效果如下： ZCW_Blog1
ZCW_Blog2
ZCW_Blog3

图片（Image）

插入图片 Markdown 语法：![图片alt](图片链接或路径 "图片title")
对应的HTML代码：<img src="图片链接或路径" alt="图片alt" title="图片title">
插入图片建议使用图床生成图片链接，再直接复制粘贴即可。
我使用的是 Github + jsDelivr + PicGo 搭建的免费图床，详情可见

转义字符语法

如果要显示原本用于格式化 Markdown 文档的字符，请在字符前面添加反斜杠字符 () 。
以下列出的字符都可以通过使用反斜杠字符进行转义：

Character	Name
\	backslash
`	backtick
*	asterisk
_	underscore
{}	curly braces
[]	brackets
()	parentheses
#	pound sign
+	plus sign
-	minus sign (hyphen)
.	dot
!	exclamation mark
\|	pipe

文章编辑常用的基本语法差不多就以上这些，掌握之后就可以开始创作啦。如果想了解拓展语法可以接着往下看：

拓展语法

注意免费版 MarkdownPads2 是不支持拓展语法的，需要升级为 Markdown（Extra），详见在Hexo博客上进行创作。拓展语法没有相应快捷键哦。

表格

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

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |

呈现的输出如下所示：

Syntax	Description
Header	Title
Paragraph	Text

单元格宽度可以变化，但是呈现的输出不变：

| Syntax | Description |
| --- | ----------- |
| Header | Title |
| Paragraph | Text |

Syntax	Description
Header	Title
Paragraph	Text

Tip: 使用连字符和管道创建表可能很麻烦。可以尝试使用Markdown Tables Generator，通过图形界面构建表格，然后将生成的 Markdown 格式的文本复制到文件中。

对齐

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

| Syntax      | Description | Test Text     |
| :---        |    :----:   |          ---: |
| Header      | Title       | Here's this   |
| Paragraph   | Text        | And more      |

呈现的输出如下所示：

Syntax	Description	Test Text
Header	Title	Here's this
Paragraph	Text	And more

表格中可使用的文本格式

可以添加链接，代码（仅反引号（`）中的单词或短语，而不是代码块）和强调，但不能添加标题，块引用，列表，水平规则，图像或 HTML 标签。

合并单元格

Markdown 并没有合并单元格的相关语法，但是 Markdown 是兼容 HTML 的，因此可以通过 HTML 的方式实现单元格合并。相关内容可以参考Markdown表格合并单元格，于此不再赘述。

围栏代码块

创建围栏代码块：在代码块之前和之后的行上使用三个反引号（```）或三个波浪号（~~~）。

```
	{
	  "firstName": "John",
	  "lastName": "Smith",
	  "age": 25
	}
```

呈现的输出如下所示：

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

要在代码块中显示反引号，只需要用更多的反引号包裹就好了，跟套娃一样，例如：

```` 
```
	{
	  "firstName": "John",
	  "lastName": "Smith",
	  "age": 25
	}
``` 
````

呈现的输出就是这样：

```
	{
	  "firstName": "John",
	  "lastName": "Smith",
	  "age": 25
	}
```

语法高亮

使用此功能可以为编写代码的任何语言添加颜色突出显示，只要在受防护的代码块之前的反引号旁边指定一种语言即可。

``` json
	{
	  "firstName": "John",
	  "lastName": "Smith",
	  "age": 25
	}
```

呈现的输出如下所示：

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

脚注

脚注可以添加注释和参考。当创建脚注时，点击带有脚注的上标数字可以跳至页面底部的脚注内容。示例如下：

Here's a simple footnote.[^1] 

Here's a long footnote.[^bignote]

And here's a reduplicate one.[^bignote]

[^1]: This is the first footnote.

[^bignote]: Here's one with multiple paragraphs and code.

    Indent paragraphs to include them in the footnote.

    `{ my code }`

    Add as many paragraphs as you like.

Here's a simple footnote.¹

Here's a long footnote.²

And here's a reduplicate one.³

删除线

删除线功能可以指示某些错误。在要删除的词语前后使用两个波浪号（~）即可，如下：

1	~~地球是方的。~~地球是圆的。

~~地球是方的。~~地球是圆的。

任务列表

创建任务列表：在任务列表项之前添加破折号（-）和方括号，注意 - 和 [ ] 之间要加上空格，如下：

1
2
3

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

Write the press release
Update the website
Contact the media

使用 Emoji 表情

有两种方法将表情符号添加到 Markdown 文件中：将表情符号复制并粘贴到 Markdown 格式的文本中，或者键入 emoji shortcodes（表情简码）。我在 MarkdownPad2 上使用表情简码没有成功，应该是不支持，所以只能使用复制粘贴的方法。

复制和粘贴表情符号

大多数情况下可以简单地从 Emojipedia 等来源复制表情符号并粘贴到文档中。 Markdown 编辑器会自动以 Markdown 格式的文本显示表情符号💡。

自动网址链接

MarkdownPad2 会自动将 URL 转换为链接。也就是说如果输入 http://www.example.com ，即使未使用方括号，MarkdownPad2 也会自动将其转换为链接。
如果不希望 MarkdownPad2 自动链接 URL ，则可以通过将 URL 表示为带反引号的代码来删除该链接。

常用技巧

这里主要是利用 Markdown 支持基本的 HTML 语法的特性，满足一些编辑排版的需要。

居中、左对齐、右对齐

在超链接居中部分已经提及，Markdown 本身并没有居中语法，但我们可以使用 HTML 语法来实现居中、左对齐和右对齐。
示例如下：

1
2
3

<center>居中</center>
<p align="left">左对齐</p>
<p align="right">右对齐</p>

实现效果：居中

左对齐

右对齐

高级技巧

显示数学公式

typora 本身支持 mathjax 公式。 MarkdownPad 2中需要自定义头文件,依次点击 Tools > Option > Advanced > HTML Head Editor ，添加如下代码：

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
    },
    "HTML-CSS": { fonts: ["TeX"] }
  });
</script>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

如图

再在 md 文件里添加如下代码进行测试：

When $( a \ne 0 )$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are:
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
	
$$
\begin{aligned}
\dot{x} & = \sigma(y-x) \\
\dot{y} & = \rho x - y - xz \\
\dot{z} & = -\beta z + xy
\end{aligned}
$$

按F6查看结果如下：

注：假如要让 Hexo 渲染 mathjax 数学公式，还需更换渲染器，详见这里。

mermaid 绘图

typora 默认支持 mermaid 语法。

mermaid 语法

饼状图

<pre class="mermaid">pie
	title 如果没有报销是否还会坚持参加科创比赛
	"会" : 5
	"不会" : 95</pre>

pie
    title 如果没有报销是否还会坚持参加科创比赛
    "会" : 5
    "不会" : 95

自此，有关 Markdown 语法的学习就暂时告一段落啦，现在就将所学用于实践，去编辑你的第一个 Markdown 文件吧。你也可以在Markdown 在线编辑器上小试牛刀。
如果要让你的 Markdown 文件更加易读，改善你的排版，让你的网页更有气质，可以学习 Markdown 的一些编写规范：Markdown 编写规范

参考文章

Markdown 语法教程
 个人主页与 Hexo 博客搭建记录-提示卡片

This is the first footnote.↩︎
Here's one with multiple paragraphs and code.
Indent paragraphs to include them in the footnote.
{ my code }
Add as many paragraphs as you like.↩︎
Here's one with multiple paragraphs and code.
Indent paragraphs to include them in the footnote.
{ my code }
Add as many paragraphs as you like.↩︎

-------------------------- --------------------------

本文标题:Markdown 语法详解及使用技巧

文章作者:reman

发布时间:2021年08月19日 - 00:36:36

最后更新:2022年08月30日 - 15:56:12

原始链接:https://zcw-blog.top/posts/20210819a1/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际转载请注明出处。