7.2 Markdown文档语法详解

10、列表 - 无序列表¶

TIP

要创建无序列表，请在行项目前添加破折号 - 星号 * 或加号 + 缩进一项或多项以创建嵌套列表

![[Pasted image 20260127203509.png]]

![[Pasted image 20260127203536.png]] 渲染的输出如下所示： ![[Pasted image 20260127203558.png]]

11、代码块¶

TIP

在 Markdown 中插入代码块有两种方式：行内式和块级式。

行内式：使用单个反引号 ` 将代码包裹起来。

块级式：使用三个反引号 ```将代码块包裹起来，并可以在反引号后指定代码的语言（可选）。

11.1、单行代码块¶

TIP

使用单个反引号 `将代码包裹起来。

Markdown 语法	HTML	渲染输出
这是一个`行内式`代码块	这是一个`<code>行内式</code>`代码块	这是一个`行内式`代码块
![[Pasted image 20260127204537.png]]

11.2、块级代码块（多行）¶

TIP

使用三个反引号 ```将代码块包裹起来，并可以在反引号后指定代码的语言（可选）。

可支持多种编程语言类型：html、css、javascript、vue、java、python...

语法格式如下¶

代码片段
代码片段

**CSS

p {
  color: red;
  font-size: 14px;
}

**JavaScript

const num1 = ~~3.14;
const num2 = 3.14 | 0;
const num3 = 3.14 >> 0;
console.log(num1, num2, num3); // 3 3 3

JSON 数据

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

12、分割线¶

TIP

要创建水平线，请在一行上单独使用三个或更多星号 *** 、破折号 --- 或下划线 ____

代码示例

在Markdown中使用以下语法创建分割线：

***
---
___

渲染输出如下所示：

13、外链接¶

TIP

要创建链接，请将链接文本括在括号中

例如：[arry老师博客]，然后紧跟在括号中的 URL (例如，(https://www.arryblog.com))

最适合 Web 前端学习的技术博客是 Arry 老师的博客

渲染的输出如下所示：

最适合 Web 前端学习的技术博客是 Arry 老师的博客

13.1为链接添加标题¶

TIP

您可以选择为链接添加标题。当用户将鼠标悬停在链接上时，这将显示为工具提示。

MarkDown 语法：[标题文字](链接地址)

注：要添加标题，请在 URL 后用引号将其括起来。

Markdown 示例：

最适合 Web 前端学习的技术博客是 [Arry 老师的博客](https://www.arryblog.com "最好的技术博客")

渲染的输出如下所示:

最适合 Web 前端学习的技术博客是 Arry 老师的博客

13.2、URL 和电子邮件地址¶

TIP

要将 URL 或电子邮件地址快速转换为链接，请将其括在尖括号中。

Markdown 语法如下：

<https://www.arryblog.com>
<icodingedu@foxmail.com>

渲染的输出如下所示：

<https://www.arryblog.com>

icodingedu@foxmail.com

13.3、格式化链接¶

TIP

要强调链接，请在方括号和圆括号前后添加星号。要将链接表示为 code，请在括号中添加反引号。

Markdown 语法：

我最喜欢的技术博客是 **[arry 老师的博客](https://www.arryblog.com)**
代码部分的具体使用：[`console.log(1)`](<#console.log(1)>)

渲染的输出如下所示：

我最喜欢的技术博客是 arry 老师的博客

代码部分的具体使用：console.log(1)

14、插入图像¶

TIP

插入图像的语法：![描述](图片链接地址)

注：图片链接地址，支持相对路径和绝对路径(网络地址)。

语法示例：

![图片](../图片/1.png)

或者使用 HTML 标签插入图片

<img src="图片地址" alt="图片说明" />

根据您提供的图片信息，图片中的详细文字内容如下：

15、链接图像¶

TIP

要添加到图像的链接，请将图像的MarkDown括在括号中，然后将链接添加到括号中。

Markdown 语法如下：

[![图片](../图片/1.png)](https://arryblog.com)

16、转义字符（显示特殊符号）¶

TIP

如何在 MarkDown 文档中打出特殊字符？要显示原本用于在 Markdown 文档中格式化文本的文字字符，在字符前面添加反斜杠 ``。

示例：

\* 如果没有反斜杠，这将是无序列表中的项目符号

渲染的输出如下所示：

*如果没有反斜杠，这将是无序列表中的项目符号

可转义字符列表：

字符	名称
``	反斜杠
`	反引号
`*`	星号
`_`	下划线
`{ }`	大括号
`[ ]`	括号
`< >`	尖括号
`( )`	括号
`#`	英镑符号
`+`	加号
`-`	减号（连字符）
`.`	点
`!`	感叹号
`\\ \|`

以上表格中，是可使用反斜杠来转义的字符。

17、表格¶

TIP

MarkDown 书写表格的具体语法

表头

表头由一行文本组成，每个单元格的内容用 |符号分隔。

表头下方需要一行分隔行，用于区分表头和表格内容。分隔行由 -符号组成，且 -的数量应与表头中的列数相匹配（但通常至少为 3 个 -）。分隔行的左侧和右侧可以省略 |符号。

单元格内容

单元格内容也使用 |符号分隔，每行代表表格中的一行数据。

单元格内容可以包含文本、数字、链接等。

对齐方式

默认情况下，Markdown 表格的单元格内容居左对齐。

可以通过在分隔行两侧的 :符号来调整对齐方式。例如，:--:表示居中对齐，:--表示左对齐（实际上是默认对齐方式，因此通常不需要显式指定），--:表示右对齐。

2.1、基础表格¶

| 表头列 1 | 表头列 2 | 表头列 3 |
| ----- | ----- | ----- |
| 数据 1  | 数据 2  | 数据 3  |
| 数据 4  | 数据 5  | 数据 6  |

渲染效果：

表头列 1	表头列 2	表头列 3
数据 1	数据 2	数据 3
数据 4	数据 5	数据 6

2.2、带对齐方式的表格¶

|左对齐|居中对齐|右对齐|
|---|---|---|
|数据 1|数据 2|数据 3|
|数据 4|数据 5|数据 6|

渲染效果：

左对齐	居中对齐	右对齐
数据 1	数据 2	数据 3
数据 4	数据 5	数据 6

WARNING

注：在 Markdown 的某些解析器中，对齐方式的渲染可能略有不同，但上述语法是通用的。

2.3、复杂表格（需要合并单元格）¶

TIP

MarkDown 本身并不直接支持合并单元格的功能，但可以通过兼容 HTML 的方式来实现。以下是一个包含合并单元格的表格示例

<table border="1" width="800">
    <thead>
        <tr>
            <th colspan="2">需求：V0.3版本规划</th>
            <th>优先级</th>
            <th>任务分解</th>
            <th>产品负责人</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="3">功能模块1</td>
            <td>具体事项1</td>
            <td>3</td>
            <td>任务1</td>
            <td rowspan="3">@翠花</td>
        </tr>
        <tr>
            <td rowspan="2">具体事项2</td>
            <td>4</td>
            <td>任务2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>任务3</td>
        </tr>
        <tr>
            <td rowspan="6">功能模块2</td>
            <td>具体事项1</td>
            <td>2</td>
            <td>任务1</td>
            <td rowspan="6">@美美</td>
        </tr>
        <tr>
            <td rowspan="4">具体事项2</td>
            <td>3</td>
            <td>任务1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>任务2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>任务3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>任务4</td>
        </tr>
        <tr>
            <td>具体事项3</td>
            <td>1</td>
            <td>任务1</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="5">备注信息</th>
        </tr>
        <tr>
            <td colspan="5">...</td>
        </tr>
    </tfoot>
</table>

渲染效果：

需求：V0.3版本规划		优先级	任务分解	产品负责人
功能模块1	具体事项1	3	任务1	@翠花
	具体事项2	4	任务2
	具体事项2	1	任务3
功能模块2	具体事项1	2	任务1	@美美
	具体事项2	3	任务1
		2	任务2
		1	任务3
		4	任务4
	具体事项3	1	任务1
备注信息
...

注：

不是所有的 Markdown 解析器都支持 HTML 标签，因此在编写 Markdown 文档时，最好先了解所使用的 Markdown 解析器是否支持 HTML 标签以及具体的支持程度。
如果所使用的 Markdown 解析器不支持 HTML 标签，那么就无法实现合并单元格的功能。