Markdown-基础学习

本文源自于Markdown 语法手册

Markdown 是一种用于写作的轻量级标记语言。它可以通过简单的语法标记，将纯文本文档转化为格式化的 HTML 文档，从而帮助作者摆脱复杂的文字排版，专注于内容本身。目前，Markdown 已经被广泛用于笔记记录、代码说明、博客写作、网页发布等领域，成为最受欢迎的标记语言。本文简要介绍了 Markdown 语言的基本语法。

文章目录

1. 基础篇
2. 进阶篇 - HTML 语法应用
3. 结语
- 粗体（Bold）
- 斜体（Italic）
- 粗体（Bold）和斜体（Italic）

1. 基础篇

1.1 标题

Markdown 使用 1 ~ 6 个#+空格标记 1 ~ 6 级标题。例如：

1
2
3

# 这是一级标题
## 这是二级标题
###### 这是六级标题

1.2 段落

Markdown 的段落没有特殊语法，直接输入文本即可。段落结束时，Markdown 要求使用 “空行” 分割段落。部分 Markdown 编辑器也允许在段尾使用一个回车符分割段落，但这不是 Markdown 标准语法，可能在其他编辑器中引起格式错误。

1.3 列表

Markdown 支持有序列表、无序列表和任务列表，并允许列表嵌套，创建多级列表。

1.3.1 有序列表

在文本前输入数字+.+空格，可以创建一个有序列表。在列表子项后输入一次回车，可以创建列表的下一子项。列表结束后，需要用 “空行” 分割列表与后续文本。例如，以下代码：

1. 有序列表第一项
2. 有序列表第二项
3. 有序列表第三项

后续的段落文本，不属于列表。

创建了如下列表。

1.有序列表第一项
2.有序列表第二项
3.有序列表第三项
后续的段落文本，不属于列表。

当删除源码第 4 行的空行后，实际创建了如下列表。

1.有序列表第一项
2.有序列表第二项
3.有序列表第三项
  后续的段落文本，不属于列表。

其中，第 4 行的段落文本被标记为有序列表第三项的内容。

1.3.2 无序列表

在文本前输入-+空格，可以创建一个无序列表。其中，-可以替换为+或*。在列表子项后输入一次回车可以创建列表的下一子项。列表结束后，同样使用 “空行” 分割列表与后续文本。例如，以下代码：

- 无序列表第一项
- 无序列表第二项
- 无序列表第三项

后续的段落文本，不属于列表。

创建了如下列表。

● 无序列表第一项
● 无序列表第二项
● 无序列表第三项
后续的段落文本，不属于列表。

1.3.3 任务列表

在文本前输入-+空格+[ ]可以创建一个任务列表。其中，-可以替换为+或*。在[ ]中输入字母x，表示任务项完成或选中状态，输入空格则表示任务项未完成或未选中。任务列表进入下一项和退出的语法与另两种列表相同。例如，以下代码：

1 2	- [ ] 未完成的任务 - [x] 已完成的任务

创建了如下列表。

1 2	⬜ 未完成的任务 ✅ 已完成的任务

1.3.4 多级列表

相对列表子项缩进一个Tab，然后接续列表语法，可以创建多级列表。子列表类型可以与父列表不同。子列表缩进不够时，可能引起列表层级错误，需要特别注意。子列表结束时，只需要取消相对缩进，不需要用 “空行” 分割。例如，以下代码：

1. 一级列表的第一项
   - 嵌套的无序列表第一项
       - [ ] 嵌套的未完成任务
           1. 嵌套的有序列表第一项
           2. 嵌套的有序列表第二项
       - [x] 嵌套的已完成任务
           - 嵌套的无序列表第一项
           - 嵌套的无序列表第二项
       
用"空行"分割表示列表结束，后续文本不属于上面的列表。

创建了如下列表。

1.一级列表
    ● 嵌套的无序列表第一项
        ⬜ 嵌套的未完成任务
             1.嵌套的有序列表第一项
             2.嵌套的有序列表第二项
        ✅ 嵌套的已完成任务
             ● 嵌套的无序列表第一项
             ● 嵌套的无序列表第二项
用"空行"分割表示列表结束，后续文本不属于上面的列表。

其中，源码第 8 行的 “空行” 表示列表结束，后续内容不属于列表。

1.4 引用块

引用块是拥有特殊格式的文本，其目的是为了引起读者的注意。Markdown 创建引用块的语法较为简单，仅需在行首输入>+空格。引用块内部可以嵌套段落、列表、公式等内容块。例如，以下代码：

> 这是一个嵌套列表的引用块
>
> 1. 有序列表第一项
>     - 无序列表第一项
>     - 无序列表第二项
> 2. 有序列表第二项
>     - 无序列表第一项
>     - 无序列表第二项

创建了如下引用块。

这是一个嵌套列表的引用块

列表第一项

无序列表第一项

无序列表第二项

列表第二项

无序列表第一项

无序列表第二项

引用块内部也可以嵌套子引用块，形成多级引用。例如，以下代码：

1 2	> 这是一级引用块的段落。 > > 这是嵌套的子引用块的段落。

创建了如下引用块。

这是一级引用块的段落。

这是嵌套的子引用块的段落。

1.5 图片

为了保证纯文本性，Markdown 文档并不实际保存图片，而是以引用方式插入图片，其语法为：

1	![图片描述](图片地址 "图片标题")

其中，“图片描述” 为选填项，主要用于图片加载失败时，简述图片内容。“图片标题” 也是选填项，图片加载后，当鼠标悬停于图片上即可显示该标题。“图片地址” 为必填项，可以填写网络地址或本地路径。例如，以下代码：

1	![网络图片](https://cdn.jsdelivr.net/gh/Barry-Aerbeita-zhou/img/image_bed/1a37bb737a9846deb658a8b48bf5344b.png)

在 Markdown 文档中插入了如下图片。

网络图片

按上述方法插入的图片，当网络不畅或本地图片丢失、路径改变时，会导致图片无法正常加载。为了解决这一问题，Markdown 还提供了如下图片插入方法：

1	![图片说明](图片的Base 64编码 "图片标题")

其中，图片的 Base 64 编码以文本形式描述了图片信息。以此替换图片地址，既在 Markdown 文档中包含了图片信息，也保持了文档的纯文本性。但是，由于图片的 Base 64 编码较为冗长，不具有可读性，因此，该方法的实际应用较少。

1.6 链接

Markdown 创建链接的语法如下：

1	[链接说明](链接地址 "链接标题")

其中，“链接说明” 是渲染后的可见文字，通常描述链接到的内容。“链接标题” 为选填项，渲染后，鼠标悬停在链接上即可显示该标题。“链接地址” 除了输入网址，还可以输入本地文件路径或当前文档标题，此时，该链接将跳转至对应的本地文档或当前文档的标题锚点。例如：

1
2
3

[网址](https://www.baidu.com "跳转至网页")
[文件](./示例.md "跳转至本地 "示例.md" 文件")
[锚点](#13-列表 "跳转至当前文档 "1.3 列表" 对应的锚点")

分别创建了网址、本地文件和文件标题的链接。其中，创建标题锚点时，无论跳转至几级标题均只输入一个#，且#与标题之间无空格，这与创建标题的语法不同。

当创建锚点的标题中含有标点符号、空格、大写字母时，不同的 Markdown 编辑器采用了不同的处理方式。其中，Typora 编辑器不需要对以上字符做任何处理；Obsidian 需要用 “%20” 代替 “空格”；而 VScode、github、StackEdit 等编辑器，需要删除标点符号，用-代替 “空格”，用小写字母代替大写字母。例如：创建 “10. HTML 语法” 的锚点时，不同 Markdown 编辑器的语法分别如下。

1
2
3

[10. HTML 语法的锚点](#10. HTML 语法 "Typora 编辑器")
[10. HTML 语法的锚点](#10.%20HTML%20语法 "Obsidian 编辑器")
[10. HTML 语法的锚点](#10-html-语法 "VScode、github、StackEdit 编辑器")

1.7 公式块

Markdown 支持 MathJax 引擎渲染 LaTeX 数学公式，并允许创建行级公式和块级公式。LaTeX 数学公式的语法参见此文档。

1.7.1 行级公式

在 LaTeX 公式两端分别输入一个$即可创建行级公式。行内公式处于段内，不单独成行。例如：

1	这是一个行内公式：$a^2+b^2=c^2$。

创建了如下文本：

这是一个行内公式： a 2 + b 2 = c 2 a^2+b^2=c^2 a2+b2=c2。

1.7.2 块级公式

在 LaTeX 公上下行或两端分别输入两个$即可创建块公式。块公式独立成行。例如：

1
2
3

$$
a^2+b^2=c^2\tag{1}
$$

创建了如下块级公式：

a 2 + b 2 = c 2 (1) a^2+b^2=c^2\tag{1} a2+b2=c2(1)

1.8 代码块

Markdown 允许创建行内代码和代码块。

1.8.1 行内代码

创建行内代码的语法较为简单，仅需在代码内容两端分别输入一个`即可。例如：

1	这是一段包含行内代码`print()`的文字。

创建了如下文本：

在这里插入图片描述

行内代码由于具有一定的渲染样式，因此，也可以用于强调段内文字。

1.8.2 代码块

在代码内容上下行分别输入三个即可创建代码块。代码块支持语法高亮功能。在代码块第一行的之后输入编程语种即可实现特定的语法高亮。例如：

在这里插入图片描述

创建了如下代码块。

#include <iostream>
int main(void)
{
	std::cout << "Hello Markdown!\n";
	return 0;
};

1.9 表格

Markdown 使用管道符|分割单元列，使用三个以上连字符-分割表头和内容行。在连字符-左侧输入:表示当前列左对齐，右侧输入:表示当前列右对齐，两侧分别输入:表示当前列居中对齐。一个 4 行 3 列表格的 Markdown 语法如下：

|左对齐 |居中对齐 |右对齐 |
|:------|:------:|------:|
|单元内容|单元内容|单元内容|
|单元内容|单元内容|单元内容|
|单元内容|单元内容|单元内容|

基本的使用模板如下：

| 标题        | 说明                                      |
|-------------|------------------------------------------|
| XXX         | XXX                                      |
| XXX         | XXX                                      |
| XXX         | XXX                                      |
| XXX         | XXX                                      |
| XXX         | XXX                                      |
| XXX         | XXX                                      |
| XXX         | XXX                                      |

渲染效果为：

左对齐	居中对齐	右对齐
单元内容	单元内容	单元内容
单元内容	单元内容	单元内容
单元内容	单元内容	单元内容

注：Markdown 表格的对齐方式是对整列而言的，其语法本身不支持对单个单元格设置对齐方式。

1.10 脚注

Markdown 允许创建脚注对文本内容加以解释说明。脚注的语法包括注记和注记说明两部分，其语法如下：

1 2	这是注记的语法[^注记符号] [^注记符号]: 这是对注记的解释说明。

其中，注记符号可以是数字或其他字符；注记说明可以直接列在脚注所在的段落之后或文档其他位置，但通常的做法是列在文档最后。

1.11 分割线

在单独一行输入三个-或者*可以创建一条水平线用以分割页面。该语法在基于 Markdown 的 PPT文档制作中应用广泛，本文不做细表。

1.12 文字样式

Markdown 支持斜体、粗体、斜体加粗、删除线等字体样式。在文字两端分别输入一个或者_表示斜体；输入两个或_表示粗体；输入三个*或_表示斜体加粗；输入两个~表示删除线。例如，以下代码：

*这是斜体文字*
_这是斜体文字_
**这是粗体文字**
__这是粗体文字__
***这是斜粗体文字***
___这是斜粗体文字___
~~这是带删除线的文字~~

的渲染效果为：

在这里插入图片描述

这些文字样式样式可以应用在标题、段落、列表、引用块、链接、表格、脚注等内容的文字中，用以对部分文字进行强调。

2. 进阶篇 - HTML 语法应用

Markdown 语法本身不具备复杂的文字、段落、图片排版功能，但它对 HTML 元素的支持使其具备了实现复杂排版的能力。本节简要介绍了 Markdown 实现文字、段落、图片排版的 HTML 语法。

2.1 文字样式

Markdown 对文字颜色、字体、高亮、下划线等样式的设置需要借助 HTML 语法实现。例如：

<u>这是一段带下划线的文字</u>
<mark>这是一段高亮文字</mark>
<font color=red>这是一段红色文字</font>
<font face="黑体">这是一段黑体文字</font>
<font color=red face="黑体">这是一段红色黑体文字</font>

部分 Markdown 编辑器允许在文字两端分别输入两个=标示高亮文字，即：==高亮文字==。但这不是标准的 Markdown 语法，在其他编辑器中可能无法识别。

2.2 段落样式

借助 HTML 语法，Markdown 可以实现首行缩进、对齐方式、行间距等段落排版样式。其语法示例如下：

<p style="text-align:left;">这是一段左对齐的文字</p>
<p style="line-height:20px;"> 这是一段行高 20px 的文字</p> 
<p style="text-indent:2em;"> 这是一段首行缩进两个字符的文字</p>
<p style="line-height:20px; text-indent:2em; text-align:justify;"> 这是一段行高 20px、首行缩进两个字符、两端对齐的文字</p>

2.3 图片排版

以引用方式在 Markdown 文档中插入的图片可能并不符合预期效果，此时，可以借助 HTML 语法对图片的尺寸和对齐方式进行调整。其语法示例如下：

1
2
3

<div align="center">
<img src="图片地址" width="图片宽度" height="图片高度" alt="图片说明" title="图片标题">
</div>

其中，align指定了图片的对齐方式，可选参数为center、left、right；src为图片地址，不能省略；alt、title分别为图片说明和图片标题，可以省略；width、height分别为图片的宽度和高度，其单位可以是 px 或对应的缩放比例。

按照上述语法，在div标签中包裹多个img标签，还可以实现多图并排。例如，以下代码：

<div align="center">
<img src="https://cdn.jsdelivr.net/gh/Barry-Aerbeita-zhou/img/image_bed/b3d5bc0aacd34ca5b2ea98d7bd9b39aa.png" width="49%" height="49%">
<img src="https://cdn.jsdelivr.net/gh/Barry-Aerbeita-zhou/img/image_bed/b3d5bc0aacd34ca5b2ea98d7bd9b39aa.png" width="49%" height="49%">
</div>

在文档中插入了如下图片。

3. 结语

本文介绍了 Markdown 的基本语法以及借助 HTML 元素实现文字、段落、图片排版的基本方法。实际上，除了上述语法外，Markdown 还可以用于创建流程图、时序图、甘特图、UML 类图、饼图、思维导图等 Mermaid 图。这些高阶语法可以参考此文档，本文不再赘述。

通过将文本设置为粗体或斜体来强调其重要性。

粗体（Bold）

要加粗文本，请在单词或短语的前后各添加两个星号（asterisks）或下划线（underscores）。如需加粗一个单词或短语的中间部分用以表示强调的话，请在要加粗部分的两侧各添加两个星号（asterisks）。

Markdown语法	HTML	预览效果
`I just love bold text.`	`I just love <strong>bold text</strong>.`	I just love bold text.
`I just love __bold text__.`	`I just love <strong>bold text</strong>.`	I just love bold text.
`Loveisbold`	`Love<strong>is</strong>bold`	Loveisbold

斜体（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.
`Acatmeow`	`A<em>cat</em>meow`	Acatmeow

粗体（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 is really*very*important text.`	`This is really<strong><em>very</em></strong>important text.`	This is really*very*important text.