# MarkDown 从入门到精通，完整版图文教程

TIP

Markdown 对于编程开发人员来说是一种非常重要的工具，日常工作中每天都会用到。从本节开始，我们进行系统的学习 MarkDown 语法。

MarkDown 前世今生
MarkDown 创始人和成就
MarkDwown 原理
MarkDown 基本语法
MarkDown 进阶语法
MarkDown 高级语法
绘制各类图表（流程图、时序图、甘特图、饼图）
徽章
Typora 工具

# 一、什么是 Markdown

TIP

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，将格式元素添加到纯文本文档
Markdown 允许您使用易于阅读、易于编写的纯文本格式进行编写，然后将其转换为结构上有效的 XHTML（或 HTML）

# 1、MarkDown 创始人介绍

TIP

Markdown 是由约翰·格鲁伯（John Gruber (opens new window)）于 2004 年创建，现在是世界上最受欢迎的标记语言之一。为文档编写和排版领域做出了重要贡献，他的创造不仅简化了文档编写的流程，还提高了文档的可读性和可维护性

Photograph of the author

图：MarkDown 创始人

WARNING

John Gruber，中文翻译名字约翰·格鲁伯，1973 年出生于美国宾夕法尼亚州，是一名作家、博主、UI 设计师兼 Markdown 创始人。

他毕业于美国 Drexel University（中文译名：卓克索大学、爵硕大学 或 德雷塞尔大学），获取该学校计算机科学学士学位，2005 ～ 2006 年在 Joyent 公司（与亚马逊 EC2<亚马逊弹性计算云> 竞争，为大型企业提供基础架构服务和平台服务，早期托管过 Twitter）工作。

John Gruber 个人博客：https://daringfireball.net (opens new window)

# 2、约翰·格鲁伯 John Gruber 个人成就

TIP

约翰·格鲁伯作为 Markdown 语言的创始人，不仅为文档编写和排版领域带来了新的理念和解决方案，还通过其科技博客、播客创作、软件开发以及苹果产品评论等多方面的贡献，推动了相关领域的发展和进步。

# 2.1、Markdown 语言的创建

TIP

创新理念：格鲁伯在写科技博客的过程中，深感排版的不便，因此发明了 Markdown 这一轻量级标记语言。Markdown 的设计初衷是提供一种易于阅读、易于撰写的纯文字格式，并能选择性地转换成有效的 XHTML（或 HTML）。
语法设计：Markdown 的语法简洁明了，易于上手。它允许人们使用易读易写的纯文本格式编写文档，极大地提高了文档编写的效率和质量。
广泛应用：Markdown 自推出以来，迅速得到了广大编程开发人员、技术文档编写者、博客撰写者等用户的青睐。它已经成为一种典型的转换为 HTML 的非正式规范和参考实现。

# 2.2、科技博客与播客的创作

TIP

博客撰写：格鲁伯自 2002 年起开始写科技博客《Daring Fireball》，该博客主要评论苹果产品、策略，并发布一些自己开发的软件。格鲁伯的博客因其深入的分析和独特的见解而广受读者喜爱。
播客主持：格鲁伯还在 Mule 广播联盟的网站上主持一档叫做 “The Talk Show” 的有声杂志。这一播客节目也因其专业的内容和有趣的讨论而吸引了大量听众。

# 2.3、软件开发与贡献

TIP

Vesper 笔记开发：格鲁伯是 iOS 平台知名笔记应用 Vesper 的三位开发者之一。该应用以其出色的用户体验和性能而备受用户好评。
开源贡献：Markdown 本身是免费的，并可以通过 BSD 风格的开源许可证获得。格鲁伯的这一开源精神极大地推动了 Markdown 在不同平台上的实现和发展。

# 2.4、苹果产品评论与社区影响

TIP

苹果产品评论：格鲁伯是国外比较权威可靠的苹果产品信息来源与评论者。他的评论因其深入的分析和独特的见解而备受关注（数码博主）。
社区影响：格鲁伯在苹果社区中具有很高的知名度和影响力。他的言论和观点经常引发广泛讨论和关注，对苹果产品的推广和普及起到了积极作用。

# 3、为什么要用 MarkDown

TIP

Markdown 是可移植的： 包含 Markdown 格式文本的文件几乎可以使用任何应用程序打开。如果您决定不喜欢当前使用的 Markdown 应用程序，可以将 Markdown 文件导入另一个 Markdown 应用程序。这与 Microsoft word 等文字处理应用程序形成了鲜明对比，后者将您的内容锁定为专有文件格式
Markdown 与平台无关： 您可以在运行任何操作系统的任何设备上创建 Markdown 格式的文本
Markdown 无处不在： Reddit 和 GitHub 等网站支持 Markdown，许多桌面和基于 Web 的应用程序都支持 Markdown

# 4、MarkDown 的使用场景

TIP

Markdown 可以用于任何事情，通过简单的标记语法，它可以使普通文本内容具有一定的格式

对于程序开发人员：

技术文档编写： 编写技术文档、API 文档、用户手册、安装指南等；
代码注释和 README 文件： 在代码库中，开发人员会使用 Markdown 来编写 README 文件，介绍项目的目的、使用方法、依赖关系等。此外，Markdown 也常用于代码注释中，以提供额外的说明和解释。
在线协作和代码托管平台：在 GitHub、GitLab 等代码托管平台上，开发人员使用 Markdown 来编写 issue、pull request 的描述，以及项目页面的内容。Markdown 使得这些文本易于阅读和理解，促进了团队成员之间的有效沟通。
写作与笔记：用于撰写博客文章、日记、笔记等。许多博客平台和笔记软件都支持 Markdown 语法。
学术写作：Markdown 也适用于撰写论文、研究报告等学术文档。通过 Markdown，作者可以方便地组织文档结构、插入公式和图表，以及引用参考文献。（LaTeX 公式支持）
用它创建网站、文档、书籍、演示、电子邮件、撰写电子书（Gitbook）等

当前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。例如：GitHub、Gitee、GitLab、掘金、知乎、简书等。

# 5、支持 Markdown 的工具

TIP

支持 Markdown 语法的工具有很多，链接地址：https://www.markdownguide.org/tools/ (opens new window)

# 6、Markdown 文件的工作原理

TIP

以网页版 Markdown 工具 Dillinger 为例

总之，这是一个由四部分组成的过程：

使用文本编辑器或专用的 Markdown 应用程序创建 Markdown 文件。文件应具有 .md或 .Markdown 文件后缀名
在 Markdown 应用程序中打开 Markdown 文件
使用 Markdown 应用程序将 Markdown 文件转换为 HTML 文档
在 Web 浏览器中查看 HTML 文件，或使用 Markdown 应用程序将其转换为其他文件格式，如 PDF。

# 二、Markdown 的基本语法

TIP

几乎所有 Markdown 应用程序都支持原始 Markdown 设计文档中概述的基本语法，Markdown 处理器之间存在微小的差异和区别。

MarkDown 语法官网：https://www.markdownguide.org/basic-syntax (opens new window)

# 1、分级标题

TIP

要创建标题，请在单词或短语前添加数字符号（#），您使用的数字符号的数量应与标题级别相对应。

例如，要创建标题级别三（<h3>），请使用三个数字符号（例如 ### My Header）

Markdown 语法	HTML	渲染输出
`# 一级标题`	`<h1>一级标题</h1>`	一级标题
`## 二级标题`	`<h2>二级标题</h2>`	二级标题
`### 三级标题`	`<h3>三级标题</h3>`	三级标题
`#### 四级标题`	`<h4>四级标题</h4>`	四级标题
`##### 五级标题`	`<h5>五级标题</h5>`	五级标题
`###### 六级标题`	`<h6>六级标题</h6>`	六级标题

# 2、段落

TIP

要创建段落，请使用空行分隔一行或多行文本。

Markdown 语法	HTML	渲染输出
我真的很喜欢使用 Markdown。我想从现在开始我会用它来格式化我的所有文档。太棒了！	`<p>我真的很喜欢使用 Markdown。</p><p>我想从现在开始我会用它来格式化我的所有文档。</p>`	我真的很喜欢使用 Markdown。我想从现在开始我会用它来格式化我的所有文档。太棒了！

# 3、换行符

TIP

要创建换行符或换行符 ( <br>)，请以两个或多个空格结束一行，然后键入 return。

Markdown 语法	HTML	渲染输出
`这是第一行。 <br> 这是第二行。`	`<p>这是第一行。 <br/> 这是第二行。</p>`	这是第一行。这是第二行。

# 4、字体设置

TIP

MarkDown 字体设置语法共 5 种

# 4.1、强调（加粗）

TIP

可以通过将文本设置为粗体或斜体来增加重点
要加粗文本，请在单词或短语前后添加两个星号或下划线
为了强调单词的中间部分，请在字母周围添加两个不带空格的星号

Markdown 语法	HTML	渲染输出
我只是喜欢 `粗体字`。	我只是喜欢 `<strong>粗体字</strong>`。	我只是喜欢粗体字。
我只喜欢 `__bold text__`。	我只是喜欢`<strong>粗体字</strong>`。	我只是喜欢粗体字。
我`爱`你	我`<strong>爱</strong>`你	我爱你

最佳实践：

通过前后添加两个星号的方式

# 4.2、斜体

TIP

要使文本变为斜体，请在单词或短语前后添加一个星号或下划线
为了强调单词中间的斜体，请在字母周围添加一个不带空格的星号

Markdown 语法	HTML	渲染输出
我是 `斜体字`效果	我是`<em>斜体字</em>`效果	我是斜体字效果
我是`_斜体字_`效果	我是`<em>斜体字</em>`效果	我是斜体字效果
我是`斜`体字效果	我是`<em>斜</em>`体字效果	我是斜体字效果

# 4.3、删除线

TIP

用一对双飘号~~包裹内容，或者使用快捷键 Shift+Alt+5

~~我是删除线~~

# 4.4、下划线

TIP

用一对 u 标签<u>包裹内容，或者使用快捷键 Ctrl+U（注意，部分 Markdown 编辑器可能不支持）

<u>下划线</u>

# 4.5、文字高亮

TIP

用一对双等号==包裹内容（注意，部分 Markdown 编辑器可能不支持）

==将文字高亮==

渲染的输出如下所示：

将部分文字变得 ==高亮== 显示效果（部分 MarkDown 编辑器不支持）

# 4.6、字体、字号、颜色

TIP

Markdown 是一种可以使用普通文本编辑器编写的标记语言，通过类似 HTML 的标记语法，它可以使普通文本内容具有一定的格式。但是它本身是不支持修改字体、字号与颜色等功能。

但，可以通过内嵌 HTML 标签的形式来实现

<font face="字体名称">我是文本内容，设置字体</font><br>
<font color="red">我是文本内容，字体颜色</font><br>
<font size="5">我是文本内容，文字大小</font>

注：规定文字的尺寸大小，值的大小为：1 到 7 的数字，浏览器默认值是 3

渲染的输出如下所示：

我是文本内容，设置字体，为宋体
我是文本内容，字体颜色，为红色
我是文本内容，文字大小，字号为 5

# 6、外链接

TIP

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

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

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

渲染的输出如下所示：

最适合 Web 前端学习的技术博客是 Arry 老师的博客 (opens new window)

# 6.1、为链接添加标题

TIP

您可以选择为链接添加标题。当用户将鼠标悬停在链接上时，这将显示为工具提示。
MarkDown 语法：[标题文字](链接地址)

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

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

渲染的输出如下所示：

最适合 Web 前端学习的技术博客是 Arry 老师的博客 (opens new window)

# 6.2、URL 和电子邮件地址

TIP

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

MarkDown 语法如下：
<https://www.arryblog.com>
<icodingedu@foxmail.com>

渲染的输出如下所示：

https://www.arryblog.com (opens new window)
icodingedu@foxmail.com

# 6.3、格式化链接

TIP

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

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

渲染的输出如下所示：

我最喜欢的技术博客是 arry 老师的博客 (opens new window) 代码部分的具体使用：console.log(1)

# 7、插入图像

TIP

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

注：图像链接地址，相对路径和绝对路径（网络地址）都支持

![arry老师](./assets/arry.jpg)

或者使用 HTML 标签插入图片

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

# 8、链接图像

TIP

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

[![arry老师](./assets/arry-tencent.jpg)](https://arryblog.com)

(opens new window)

# 9、引用块

TIP

要创建引用块，请在段落前添加一个 >

> 我是一个引用块

渲染的输出如下所示：

我是一个引用块

# 9.1、带有多个段落的引用块

TIP

引用块可以包含多个段落，在段落之间的空白行上添加一个 >

> 我是 Arry 老师
>
> 全宇宙最帅气的男神 ^\_^

渲染的输出如下所示：

我是 Arry 老师

全宇宙最帅气的男神 ^_^

# 9.2、嵌套引用块

TIP

引用块可以嵌套，在要嵌套的段落前面添加两个 >>

> 我是 Arry 老师
>
> > 全宇宙最帅气的男神

渲染的输出如下所示：

我是 Arry 老师

全宇宙最帅气的男神

# 9.3、带有其他元素的引用块

TIP

引用块可以包含其他 Markdown 格式的元素，并非所有元素都可以使用，需要尝试看看哪些元素有效。

> #### Markdown 语法的学习
>
> - 什么是 Markdown ？
> - 为什么要用 Markdown ?
> - 支持 Markdown 的应用程序和组件，工具
> - Markdown 文件的工作原理
> - Markdown 的基本语法
>
> **真的真的** 是太好用了，我今天就开始**用起来 ！**

渲染的输出如下所示：

# Markdown 语法的学习

什么是 Markdown ？

为什么要用 Markdown ?

支持 Markdown 的应用程序和组件，工具

Markdown 文件的工作原理

Markdown 的基本语法

真的真的 是太好用了，我今天就开始用起来！

# 10、列表 - 有序列表

TIP

在每一行的前面加上一个数字和一个点号（.），然后跟一个空格
列表中的每个项目都应以递增的数字开始（尽管 Markdown 引擎会自动处理数字顺序，你仍然可以按任意顺序输入它们）

1. 第一项
2. 第二项
   1. 缩进的项目一
   2. 缩进的项目二
3. 第三项
4. 第四项
5. 第五项

渲染的输出如下所示：

第一项
第二项
1. 缩进的项目一
2. 缩进的项目二
第三项
第四项
第五项

# 11、列表 - 无序列表

TIP

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

- 第一项
- 第二项
  - 缩进项目一
  - 缩进项目二
    - 缩进缩进项目 1
    - 缩进缩进项目 2
  - 缩进项目三
- 第三项
- 第四项

渲染的输出如下所示：

第一项
第二项
- 缩进项目一
- 缩进项目二
  - 缩进缩进项目 1
  - 缩进缩进项目 2
- 缩进项目三
第三项
第四项

# 12、分割线

TIP

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

---
---

---

渲染的输出如下所示：

# 13、代码块

TIP

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

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

# 13.1、单行代码块

TIP

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

Markdown 语法	HTML	渲染输出
这是一个`行内式`代码块	这是一个`<code>行内式</code>`代码块	这是一个`行内式`代码块

`这是一个行内式代码块`

渲染的输出如下所示：

这是一个行内式代码块

console.log('hello world')

<h1>我是一级标题</h1>

# 13.2、块级代码块（多行）

TIP

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

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

语法格式如下

```编程语言类型
代码片段
代码片段
```

```js
console.log("Hello, world!");
```

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
}

# 三、MarkDown 进阶语法

TIP

深入浅出转义字符，表格，脚注，上标、下标、Task Lists 任务列表（待办事宜 Todo 列表），锚点和内容目录

# 1、转义字符（显示特殊符号）

TIP

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

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

渲染的输出如下所示：

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

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

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

# 2、表格

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 标签，那么就无法实现合并单元格的功能。

# 3、脚注

TIP

Markdown 脚注是一种在文档中添加额外注释或引用信息的有效方式，通常这些注释会出现在页面的底部或文档的末尾。

# 3.1、语法

TIP

在需要添加脚注的文本后，使用 [^标识符] 的格式来插入脚注引用。这里的“标识符”可以是数字、单词或短语，只要在整个文档中保持唯一即可。

[^标识符]: 脚注内容

# 3.2、应用场景

TIP

为特定术语或概念提供解释

当文档中出现专业术语或概念时，可以使用脚注来提供简要的解释或定义，帮助读者更好地理解。

引用外部资源

在文档中引用外部资源（如网页、书籍、文章等）时，可以使用脚注来提供资源的链接或详细信息。

添加附加信息

# Markdown 脚注 示例

在这个示例中，我们将展示如何使用 Markdown 脚注语法。

## 术语解释

Markdown[^1] 是一种轻量级标记语言，以其简洁、高效、易读、易写的特点而被广泛使用。

## 引用外部资源

有关 Markdown 的更多信息，请访问以下网站[^2]。

## 附加信息

本文的作者是张三，版权归作者所有[^3]。

[^1]: Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 HTML。
[^2]: [Markdown 官方网站](https://daringfireball.net/projects/markdown/)
[^3]: 张三，2024 年。版权所有。

渲染效果：

# 4、上标

TIP

创建上标，在需要的字符前后使用一个插入符号 ^ 即可

X^2^

渲染效果：

X^2^

或使用 <sup> 标签来创建上标

X<sup>2</sup>

渲染效果：

X²

# 5、下标

TIP

创建下标，请在字符前后使用一个波浪号~

H~2~O

渲染效果：

H~2~O

或使用 <sub> 标签来创建

H<sub>2</sub>O

用下标写一个化学方程式

如：甲烷（CH₄）燃烧生成二氧化碳（CO₂）和水（H₂O）

CH~4~ + 2O~2~ → CO~2~ + 2H~2~O
或
CH<sub>4</sub> + 2O<sub>2</sub> → CO<sub>2</sub> + 2H<sub>2</sub>O

渲染效果：

CH₄ + 2O₂ → CO₂ + 2H₂O

# 6、Task Lists 任务列表（待办事宜 Todo 列表）

TIP

Markdown Task Lists 的语法相对简单，它基于无序列表的语法，但在列表项前添加了一个方括号 [ ] 或 [x] 来表示任务的状态

# 6.1、语法

TIP

- [ ] 表示一个未完成的任务
- [x] 表示一个已完成的任务（注意，x 应该在方括号内，并且前面有一个空格）

# 6.2、应用场景

TIP

使用 Markdown Task Lists 语法的完整应用场景案例，展示了如何在一个项目文档中跟踪和管理多个任务

# 项目任务列表

## 第一阶段：需求分析

- [x] 与客户沟通，明确项目需求
  - [x] 收集并整理需求文档
  - [x] 组织需求评审会议
- [ ] 确定项目范围，划分功能模块
  - [ ] 初步划分功能模块
  - [ ] 与团队成员讨论并确认

## 第二阶段：设计阶段

- [ ] 制定项目计划，明确时间节点
  - [ ] 编写项目计划书
  - [ ] 确定关键里程碑
- [ ] 设计系统架构和数据库结构
  - [ ] 绘制系统架构图
  - [ ] 设计数据库表结构

## 第三阶段：开发阶段

- [ ] 编写前端代码
  - [ ] 完成页面布局和样式设计
  - [ ] 实现页面交互功能
- [ ] 编写后端代码
  - [ ] 搭建后端服务框架
  - [ ] 实现业务逻辑和数据库操作

## 第四阶段：测试阶段

- [ ] 编写测试用例，进行单元测试
  - [ ] 编写前端测试用例
  - [ ] 编写后端测试用例
- [ ] 进行集成测试，确保系统稳定
  - [ ] 搭建测试环境
  - [ ] 执行集成测试计划

## 第五阶段：上线阶段

- [ ] 部署系统到生产环境
  - [ ] 准备部署文档和脚本
  - [ ] 执行部署操作
- [ ] 对用户进行培训和系统交接
  - [ ] 编写用户手册和操作指南
  - [ ] 组织用户培训会议

渲染效果：

# 7、锚点

TIP

Markdown 锚点允许在文档内部创建链接，指向同一个页面上的特定部分

# 7.1、语法

①、定义锚点：

在需要跳转到的位置，使用 HTML 标签<a>定义一个锚点，并为其设置一个唯一的id属性

<a id="my-anchor">这里是锚点位置</a>

my-anchor是锚点的 ID，它用于在文档中唯一标识这个锚点

②、引用锚点：

在需要引用锚点的地方，使用 Markdown 的链接语法，并在链接文本前加上#符号和锚点的 ID

[跳转到锚点位置](#my-anchor)

这个链接将指向前面定义的my-anchor锚点位置

# 7.2、应用场景

# Markdown 锚点应用案例

## 目录

- [1. 引言](#introduction)
- [2. 主要内容](#main-content)
  - [2.1 章节一](#chapter-one)
  - [2.2 章节二](#chapter-two)
- [3. 结论](#conclusion)

## 1. 引言<a id="introduction"></a>

在本文中，我们将探讨 Markdown 锚点的使用方法和应用场景。通过锚点，我们可以在文档内部创建链接，实现快速跳转和导航。

## 2. 主要内容

### 2.1 章节一<a id="chapter-one"></a>

本章节将详细介绍 Markdown 锚点的定义和引用方法，以及如何在文档中使用它们。

### 2.2 章节二<a id="chapter-two"></a>

在本章节中，我们将通过具体案例展示 Markdown 锚点的应用场景，包括创建文档目录、实现页面内部跳转等。

## 3. 结论<a id="conclusion"></a>

通过本文的介绍和案例展示，我们了解了 Markdown 锚点的使用方法和应用场景。锚点不仅提高了文档的可读性和互动性，还方便了我们快速导航和查找信息。

注：

如果不需要显示 a 标签中的内容，可以直接去掉，放一个空链接即可

# 8、内容目录

TIP

在一些支持 [TOC] 语法的 Markdown 解析器中，你只需要在 Markdown 文件的开头（通常是第一行或第二行，紧跟在标题之后）添加 [TOC]，解析器就会自动解析文件的标题并生成一个目录。

# 标题

[TOC]

## 子标题 1

这里是子标题 1 的内容。

## 子标题 2

这里是子标题 2 的内容。

内容目录渲染效果（自动生成 MarkDown 文档内容目录）：

# 四、MarkDown 高级语法

TIP

深入浅出 LaTeX 公式，应用场景，表情符号

# 1、LaTeX 公式

TIP

LaTeX 是一种用于高质量排版的技术和科学文档的排版系统。在 Markdown 中嵌入 LaTeX 公式，可以极大地提升文档的专业性和可读性。涵盖了数学、物理、化学等多个学科领域。

官网文档：

LaTeX 的官网： https://www.latex-project.org/ (opens new window)。LaTeX 作为一种高质量的排版系统，尤其擅长于技术和科学文档的排版，它包含了许多为此类文档制作而设计的功能，并且 LaTeX 本身是免费软件，用户无需支付使用费用。
在线学习平台：如 Overleaf（https://www.overleaf.com/）等平台提供了LaTeX的在线编辑和学习环境，用户可以在这些平台上学习LaTeX语法、编辑LaTeX文档，并与其他LaTeX用户交流和分享经验。
格式化数学公式的教程和快速参考指南：访问 MathJax (opens new window) 参考更多使用方法

# 1.1、行内公式

TIP

使用 $...$ 将公式包围起来

// 这是一个行内公式示例
$E = mc^2$

渲染效果：

# 1.2、行间公式

TIP

使用 $$...$$ 或

...

（某些 Markdown 解析器支持）将公式包围起来

这是一个行间公式：

$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$

渲染效果：

这是一个行间公式：

# 1.3、常用符号与命令

TIP

上标与下标：^ 表示上标，_ 表示下标。例如： $x_i^2$ 渲染为。
分数：\frac{分子}{分母}。例如： $\frac{a}{b}$ 渲染为
根号：\sqrt{表达式}。例如： $\sqrt{x^2 + y^2}$ 渲染为
求和与积分：\sum 和 \int 分别表示求和与积分。例如： $\sum_{i=1}^{n} i$ 和 $\int_{a}^{b} f(x) \, dx$ 。
矩阵：使用 \begin{matrix}...\end{matrix} 或 \begin{bmatrix}...\end{bmatrix} 等环境来创建矩阵。
希腊字母：\alpha，\beta，\gamma，\delta 等表示希腊字母。

# 2、LaTeX 应用场景

TIP

可用于数学、物理、化学等多个学科领域

# 2.1、学术论文

TIP

LaTeX 是学术界广泛使用的排版系统，特别适合编写包含复杂数学公式的学术论文

在量子力学中，波函数的归一化条件可以表示为：

$$
\int_{-\infty}^{\infty} |\psi(x)|^2 \, dx = 1
$$

渲染效果：

在量子力学中，波函数的归一化条件可以表示为：

# 2.2、技术文档

TIP

技术文档通常包含大量的数学和物理公式，使用 LaTeX 可以使这些公式更加清晰和易于理解

在电路分析中，欧姆定律可以表示为：

$$
V = IR
$$

其中，$V$ 是电压，$I$ 是电流，$R$ 是电阻。

渲染效果：

在电路分析中，欧姆定律可以表示为：

其中，是电压，是电流，是电阻。

# 2.3、博客与网站

TIP

许多博客平台和网站支持 Markdown 和 LaTeX，使得在网页上展示数学公式变得简单而优雅

在经济学中，边际效用递减规律可以表示为：

$$
MU_x = \frac{\Delta U}{\Delta x}
$$

其中，$MU_x$ 是商品 $x$ 的边际效用，$\Delta U$ 是总效用的变化量，$\Delta x$ 是商品 $x$ 的消费量的变化量。

渲染效果：

在经济学中，边际效用递减规律可以表示为：

其中，是商品的边际效用，是总效用的变化量，是商品的消费量的变化量。

# 2.4、教育材料

TIP

LaTeX 是制作教育材料的理想工具，特别是那些需要精确表示数学概念的教材、讲义和课件

在微积分中，导数的定义可以表示为：

$$
f'(x) = \lim_{h \to 0} \frac{f(x+h) - f(x)}{h}
$$

渲染效果：

在微积分中，导数的定义可以表示为：

# 3、基础数学表达式

TIP

涵盖了从基础到稍复杂的各种数学表达式和符号

# 3.1、分数

TIP

LaTeX 公式：\frac{a}{b}
渲染效果：

# 3.2、根号

TIP

LaTeX 公式：\sqrt{x} 或 \sqrt[n]{x}（n 次根号）
渲染效果：或

# 3.3、上标与下标

TIP

LaTeX 公式：x^2，x_i
渲染效果：x^2^，

# 3.4、求和与积分

TIP

LaTeX 公式：\sum_{i=1}^{n} i，\int_{a}^{b} f(x) \, dx
渲染效果：，

# 4、复杂数学公式

TIP

极限，偏导数，积分中的复杂表达式，多重求和与积分

# 4.1、极限

TIP

LaTeX 公式：\lim_{x \to \infty} f(x)
渲染效果：

# 4.2、偏导数

TIP

LaTeX 公式：\frac{\partial f}{\partial x}
渲染效果：

# 4.3、积分中的复杂表达式

LaTeX 公式

\int_{0}^{\frac{\pi}{2}} \sin^2(x) \, dx = \frac{\pi}{4}

渲染效果：

# 4.4、多重求和与积分

LaTeX 公式

\sum_{i=1}^{n} \sum_{j=1}^{m} \int_{a}^{b} f(i, j, x) \, dx

渲染效果：

# 5、特定数学领域公式

TIP

概率论中的期望、线性代数中的向量点积、线性代数中的向量点积

# 5.1、概率论中的期望

TIP

LaTeX 公式：E[X] = \sum_{x} x \cdot P(X=x)
渲染效果：

# 5.2、线性代数中的向量点积

TIP

LaTeX 公式：\vec{a} \cdot \vec{b} = |\vec{a}| |\vec{b}| \cos \theta
渲染效果：

# 5.3、微积分中的链式法则

TIP

LaTeX 公式：\frac{dy}{dx} = \frac{dy}{du} \cdot \frac{du}{dx}
渲染效果：

# 6、常用 LaTeX 公式符号

TIP

LaTeX 公式中的符号非常丰富，涵盖了数学、物理、化学等多个学科领域。

以下是一个 LaTeX 公式符号的大全，按照不同的分类进行整理。

# 6.1、基本数学符号

符号	LaTeX 命令	示例	渲染效果
加号	`+`	`a + b`
减号	`-`	`a - b`
乘号	`\times` 或 `\cdot`	`a \times b` 或 `a \cdot b`	或
除号	`\div` 或 `/`	`a \div b` 或 `a / b`	或
等于	`=`	`a = b`
不等于	`\neq`	`a \neq b`
大于	`>`	`a > b`
小于	`<`	`a < b`
大于等于	`\geq` 或 `\geqslant`	`a \geq b` 或 `a \geqslant b`	或
小于等于	`\leq` 或 `\leqslant`	`a \leq b` 或 `a \leqslant b`	或
约等于	`\approx`	`a \approx b`
正负	`\pm`	`a \pm b`
无穷大	`\infty`	`\infty`

# 6.2、集合符号

符号	LaTeX 命令	示例
属于	`\in`	`a \in A`
不属于	`\notin`	`a \notin A`
包含	`\subset`	`A \subset B`
包含于	`\subseteq`	`A \subseteq B`
并集	`\cup`	`A \cup B`
交集	`\cap`	`A \cap B`
空集	`\emptyset` 或 `\varnothing`	`\emptyset` 或 `\varnothing`

# 6.3、函数和运算符

符号	LaTeX 命令	示例	渲染效果
求和	`\sum`	`\sum_{i=1}^n a_i`
积分	`\int`	`\int_a^b f(x) \, dx`
极限	`\lim`	`\lim_{x \to \infty} f(x)`
导数	`f'(x)` 或 `\frac{df}{dx}`	`f'(x)` 或 `\frac{df}{dx}`	或
偏导数	`\partial`	`\frac{\partial f}{\partial x}`

# 6.4、矩阵与行列式

符号	LaTeX 命令	示例	渲染效果
矩阵	`\begin{matrix} ... \end{matrix}`	`\begin{matrix} a & b \\ c & d \end{matrix}`
行列式	`\det`	`\det(A)`

# 6.5、其他符号

符号	LaTeX 命令	示例	渲染效果
角度	`\angle`	`\angle ABC`
垂直	`\perp`	`AB \perp CD`
平行	`\parallel`	`AB \parallel CD`
弧	`\overarc`	`\overarc{AB}`
点积	`\cdot`	`\vec{a} \cdot \vec{b}`
叉积	`\times`	`\vec{a} \times \vec{b}`
模	`	`\mid`
范数	`\|`	`\| a \|`
逻辑与	`\land`	`p \land q`
逻辑或	`\lor`	`p \lor q`
逻辑非	`\neg` 或 `\lnot`	`\neg p` 或 `\lnot p`	或
存在	`\exists`	`\exists x`
任意	`\forall`	`\forall x`
右箭头	`\rightarrow` 或 `\to`	`a \rightarrow b` 或 `a \to b`	或
左箭头	`\leftarrow` 或 `\gets`	`a \leftarrow b` 或 `a \gets b`	或
双箭头	`\leftrightarrow`	`a \leftrightarrow b`
映射	`\mapsto`	`a \mapsto b`

# 6.6、希腊字母

小写字母	LaTeX 命令	大写字母	LaTeX 命令
α	`\alpha`	Α	`\Alpha`
β	`\beta`	Β	`\Beta`
γ	`\gamma`	Γ	`\Gamma`
δ	`\delta`	Δ	`\Delta`
ε	`\epsilon`	Ε	`\Epsilon`
ζ	`\zeta`	Ζ	`\Zeta`
η	`\eta`	Η	`\Eta`
θ	`\theta`	Θ	`\Theta`
ι	`\iota`	Ι	`\Iota`
κ	`\kappa`	Κ	`\Kappa`
λ	`\lambda`	Λ	`\Lambda`
μ	`\mu`	Μ	`\Mu`
ν	`\nu`	Ν	`\Nu`
ξ	`\xi`	Ξ	`\Xi`
ο	`\omicron`	Ο	`\Omicron`
π	`\pi`	Π	`\Pi`
ρ	`\rho`	Ρ	`\Rho`
σ	`\sigma`	Σ	`\Sigma`
τ	`\tau`	Τ	`\Tau`
υ	`\upsilon`	Υ	`\Upsilon`
φ	`\phi`	Φ	`\Phi`
χ	`\chi`	Χ	`\Chi`
ψ	`\psi`	Ψ	`\Psi`
ω	`\omega`	Ω	`\Omega`

# 7、表情符号

TIP

将表情符号添加到 Markdown 文件有两种方法

将表情符号复制并粘贴到 Markdown 格式的文本中
键入 emoji 短代码

:stuck_out_tongue_winking_eye:
:smile:
:smiley:

渲染效果

😜 😄 😃

更多表情包：

Typora 中有自带的表情包：只需要输入 :a 就会自动出来（替换 a，b，c ... 即可）
也可以在 GitHub 上复制：https://github.com/zhouie/markdown-emoji (opens new window)

# 五、绘制各类图形

TIP

Markdown 本身并不直接支持绘制流程图的功能。

然而，许多 Markdown 编辑器或扩展提供了对流程图的支持，通常是通过集成像 Mermaid、Graphviz 或 PlantUML 这样的图表和图形库来实现的

# 1、使用 Mermaid 在 Markdown 中绘制流程图 - 准备工作

TIP

选择合适的 Markdown 编辑器：

你需要一个支持 Mermaid 语法的 Markdown 编辑器。常见的选择有 Typora、VS Code（配合 Markdown All in One 或其他相关扩展）、StackEdit 等。

启用 Mermaid 支持：

在某些编辑器中，你可能需要在设置或配置文件中明确启用 Mermaid 支持。例如，在 Typora 中，你可以通过「设置」->「Markdown」->「Markdown 扩展语法」->勾选「图表」来启用 Mermaid 支持。

在 VS Code 中，安装 Markdown All in One 扩展后，通常默认会启用 Mermaid 支持。

# 1.2、Mermaid 流程图基础语法

声明流程图代码块：

在 Markdown 文件中，使用三个反引号 ``` 来声明一个代码块，并指定语言为mermaid

```mermaid
[你的Mermaid代码]
```

指定流程图方向：

Mermaid 支持多种流程图方向，包括从上到下（TB/TD）、从下到上（BT）、从左到右（LR）和从右到左（RL）。你可以在代码块的开头使用graph或flowchart关键字，并紧接着指定方向

// 从上到下
graph TD

// 从下到上
graph BT

定义节点和连接线

使用方括号[]来定义矩形节点
使用圆括号()来定义圆形节点
使用大括号{}来定义菱形节点等。
--> 实线箭头
--- 无箭头实线
-.- 虚线
-.-> 带箭头的虚线
==> 加粗箭头
可以在连接线上添加文字描述，使用|将描述文字括起来。

```mermaid
graph TD;
    A-->B;
    A-->|流程|C;
    B-->D;
    C-->D;
```

渲染效果：

# 1.3、绘制流程图的步骤及应用案例

TIP

定义起始节点：首先，定义一个起始节点，作为流程图的起点。
添加后续节点和连接线：根据流程的逻辑，依次添加后续节点，并使用连接线将它们连接起来。
添加子流程和条件判断：如果需要，可以使用subgraph关键字来定义子流程，或者使用条件判断语句（如{条件}?[是]->[否]）来创建分支。
自定义样式：可以使用 Mermaid 的样式语法来自定义节点和连接线的颜色、边框等属性

```mermaid
flowchart TD
    A[开始] --> B{是否继续}
    B --是--> C[执行任务1]
    B --否--> D[退出]
    C --> E[执行任务2]
    E --> F[结束]
    D --> F
    subgraph one
        E -->|调用子流程| G[子流程1]
        G --> E
    end
```

渲染效果：

以上流程图代码解读

- `A[开始]` 是起始节点。
- `B{是否继续}` 是一个条件判断节点，根据条件的不同，流程会分支到`C[执行任务1]`或`D[退出]`。
- `C[执行任务1]` 和 `D[退出]` 是后续节点。
- `E[执行任务2]` 是在`C`之后的任务。
- `F[结束]` 是流程的终点。
- `subgraph one` 定义了一个子流程，其中`G[子流程1]`是被调用的子节点。

绘制简单的用户登录流程图

```mermaid
graph TD
    A[开始] --> B[用户登录]
    B -->|成功| C[显示主页]
    B -->|失败| D[显示登录错误]
    C --> E[用户操作]
    E -->|完成| F[显示操作结果]
    E -->|未完成| G[返回用户操作]
    G --> E
```

渲染效果：

```mermaid
graph TD
A[Arry老师] -->|A1| B(模块B)
B --> C{判断条件C}
C -->|条件C1| D[模块D]
C -->|条件C2| E[模块E]
C -->|条件C3| F[模块F]
```

渲染效果

注：

相关流程图语法参考 (opens new window)

# 2、序列图

```mermaid
sequenceDiagram
A->>B: 是否已收到消息？
B-->>A: 已收到消息
```

渲染效果：

注：

更多语法参考：序列图语法参考 (opens new window)

# 3、甘特图

TIP

甘特图内在思想简单。基本是一条线条图，横轴表示时间，纵轴表示活动（项目），线条表示在整个期间上计划和实际的活动完成情况。

它直观地表明任务计划在什么时候进行，及实际进展与计划要求的对比。

```mermaid
gantt
    title 项目开发流程
    section 项目确定
        需求分析       :a1, 2026-06-22, 3d
        可行性报告     :after a1, 5d
        概念验证       : 5d
    section 项目实施
        概要设计      :2026-07-05  , 5d
        详细设计      :2026-07-08, 10d
        编码          :2026-07-15, 10d
        测试          :2026-07-22, 5d
    section 发布验收
        发布: 2d
        验收: 3d
```

渲染效果：

注：

更多语法参考：甘特图语法参考 (opens new window)

# 4、思维导图

TIP

思维导图是一种将信息以层次结构直观地组织起来的图表，显示整体各部分之间的关系。

它通常围绕一个概念创建，在空白页的中心绘制为图像，并在其中添加相关的想法表示，例如图像、单词和单词的部分。主要思想直接与中心概念相关，其他思想从这些主要思想中分支出来。

```mermaid
mindmap
  记录笔记
    准备工作
      工具选择
        纸质笔记本
        数字工具
      环境设置
        安静的地方
        良好的照明
    记录方法
      线性笔记
      思维导图
      康奈尔笔记法
    组织与整理
      分类
        主题分类
        时间分类
      复习与总结
        定期复习
        总结要点
    提高效率
      使用缩写
      高亮重点
      图表与图示
```

渲染效果

注：

更多语法参考：思维导图语法参考 (opens new window)

# 5、饼图

TIP

饼图（或圆形图）是一种圆形统计图形，被分成多个部分来表示数字比例。在饼图中，每个切片的弧长（以及其中心角和面积）与其所代表的数量成正比。

虽然它因与切成薄片的饼相似而得名，但它的呈现方式却各不相同。最早的饼图通常归功于威廉·普莱费尔 1801 年的《统计简表》

```mermaid
pie title 志愿者宠物领养
    "狗" : 386
    "猫" : 85
    "仓鼠" : 15
```

渲染效果

注：

更多语法参考：饼图语法参考 (opens new window)

# 六、徽章

TIP

在 Markdown 中，徽章（Badge）是一种小型图标，通常用于显示项目的状态、版本、许可证类型等信息。

在 GitHub，GitLab、Gitee 上都有出现很多徽章图标，以 Vue 为例 (opens new window)

(opens new window) (opens new window) (opens new window) (opens new window) (opens new window) (opens new window)

# 1、徽章的应用场景

TIP

Markdown 徽章因其简洁明了、易于嵌入的特点，在很多场景中都可以使用。

README 文件： 在 GitHub、GitLab、Gitee 等代码托管平台的项目仓库中，README 文件通常是用户了解项目的第一入口。在 README 文件中嵌入徽章，可以直观地展示项目的状态（如构建是否通过、依赖是否更新）、版本信息、许可证类型等关键信息。
文档和博客： 在使用 Markdown 编写的文档或博客中，徽章可以被用来标记某些内容的重要性（如警告、注意）、进度条（如完成度）、评分或评价等
社交媒体和个人网站： 在个人网站、社交媒体（如 Twitter、LinkedIn）的自我介绍或项目展示中，使用徽章可以快速传达个人信息（如技能标签、编程语言熟练度）、项目状态（如是否开源、是否有活跃的社区支持）等
项目管理和协作工具： 在一些支持 Markdown 的项目管理和协作工具（如 Trello、Jira、Notion）中，徽章可以被用来标记任务的优先级、状态（如进行中、已完成）、关联的资源或链接等
社区和论坛： 在一些支持 Markdown 的社区和论坛中，用户可以使用徽章来展示自己的身份（如版主、贡献者）、成就（如获得的徽章、积分）或参与的活动（如在线研讨会、黑客马拉松）
API 文档和开发者门户： 在 API 文档和开发者门户中，徽章可以被用来标记 API 的状态（如稳定、测试）、版本信息、支持的认证方式等
演示和报告： 在使用 Markdown 编写的演示文稿或报告中，徽章可以用来增加视觉效果，强调关键信息或数据

# 2、常用的徽章生成服务

TIP

Shields.io (opens new window)：一个流行的在线徽章生成服务，支持自定义标签、消息、颜色、样式等。
Badgen (opens new window)：另一个在线徽章生成服务，提供了更多的动态数据源支持，如 npm 版本、GitHub 状态等。
Simple Icons Badges (opens new window)：基于 Simple Icons 图标库的徽章生成服务，允许你使用各种流行的图标来创建徽章。

# 3、使用 Shields.io 网站生成徽章

TIP

Shields.io (opens new window) 生成的徽章可以嵌入到你的 GitHub README 文件、博客文章或其他网页中。

进入徽章生成 (opens new window) 页面中，会看到一个简单的表单，用于生成徽章。

# 4、生成徽章链接路径参数，拼接语法

TIP

标签、信息和颜色由破折号-分隔

拼接的链接地址：https://img.shields.io/badge/any_text-you_like-blue

URL 输入	标记输出
下划线 `_` 或 `%20`	空间
双下划线 `__`	下划线 `_`
双破折号 `--`	破折号 `-`

# 5、Shields.io 徽章配置路径参数

参数	说明	示例值
Label	徽章的标签，显示在徽章的左侧	`Version`
Message	徽章的消息，显示在徽章的右侧	`1.0.0`
Color	徽章的颜色，可以是预定义的颜色名或十六进制颜色代码	`blue`, `#ff6347`
Style	徽章的样式，如 flat、flat-square、plastic、social 等	`flat-square`
Logo	徽章的图标，可以是 URL 链接到图片	`https://example.com/logo.png`
LogoWidth	图标宽度，与 Logo 参数一起使用，调整图标大小	`20`
LogoColor	图标的颜色，可以是预定义的颜色名或十六进制颜色代码	`white`
Link	徽章的链接，点击徽章时跳转到的地址	`https://example.com`

注：

可以使用十六进制、rgb、rgba、hsl、hsla 和 css 命名颜色。

# 6、在文本框中输入生成徽章对应的参数

TIP

按步骤填写对应的参数，即可生成徽章

注：

生成徽章对应的参数语法和对应的值，参照以上配置表

生成后的 MarkDown 徽章语法

![Static Badge](https://img.shields.io/badge/vue-3.5.1-green)

渲染效果：

# 7、使用 Simple Icons Badges 生成徽章图标

TIP

Simple Icons Badges (opens new window)：基于 Simple Icons 图标库的徽章生成服务，允许你使用各种流行的图标来创建徽章。

使用徽章图标

生成后的 MarkDown 徽章语法

![Static Badge](https://img.shields.io/badge/vue-3.5.1-green?logo=vuedotjs)

渲染效果：

# 8、使用 Badgen 生成徽章

TIP

Badgen (opens new window)：另一个在线徽章生成服务，提供了更多的动态数据源支持，如 npm 版本、GitHub 状态等

# 8.1、生成后的 MarkDown 徽章语法

![Static Badge](https://badgen.net/docker/stars/library/centos)

渲染效果： Static Badge

# 8.2、生成带图标的徽章

TIP

具体的图标还是使用 Simple Icons Badges (opens new window) 图标库来进行生成

![Static Badge](https://badgen.net/docker/stars/library/centos?icon=docker)

渲染效果：

# 9、Version Badge 生成动态版本徽章

TIP

Version Badge (opens new window) 是一个提供 npm 包版本信息的网站‌。

用户可以通过该网站查询 npm 包的具体版本信息，包括最新版本、发布日期等。此外，该网站还支持动态徽章的生成，用户可以在项目 README 中嵌入这些徽章，以展示包的版本信息。

生成后的 MarkDown 徽章语法

[![npm version](https://badge.fury.io/js/vue.svg)](https://badge.fury.io/js/vue)

渲染效果： (opens new window)

# 七、Typora 快速书写 MarkDown 文档

TIP

Typora 是一款专为 Markdown 设计的编辑器，因界面优雅和编辑功能强而广受欢迎。

Typora 将写作与预览窗口相结合，摒弃了传统 Markdown 编辑器中繁琐的预览窗口和模式切换器，实现了所见即所得的编辑体验。

# 1、下载安装

TIP

在 MarkDown 官方文档中（选择对应 Typora 下载地址）：https://www.markdownguide.org/tools/ (opens new window)

如下载不了，联系助理老师入群，在群文件中自行下载免费版本即可

# 2、平台与版本支持

TIP

Typora 提供了包括 macOS、Windows、Linux 在内的多个操作系统版本，满足不同用户的需求。用户可以根据自己的操作系统选择合适的版本进行下载和安装。

# 3、Typora 的配置

TIP

①、偏好设置

打开 Typora 后，点击菜单栏中的“文件”->“偏好设置”，进入配置界面。
在“通用”选项卡中，可以开启“自动保存”功能，以避免意外丢失文档。
在“外观”选项卡中，可以调整字体大小、侧边栏设置和主题等。
在“编辑器”选项卡中，可以设置默认缩进、即时渲染、拼写检查和打字机模式等。
在“图像”选项卡中，可以选择插入图片时的行为，如复制图片到指定文件夹等。
在“Markdown”选项卡中，可以勾选 Markdown 扩展语法，如内联公式、下标、上标、高亮和图表等。

②、快捷键配置

在偏好设置的 “快捷键” 选项卡中，可以自定义或修改 Typora 的快捷键，以提高编辑效率

# 4、Typora 的使用技巧

TIP

实时预览：Typora 支持实时预览功能，用户在编辑 Markdown 文档时，可以实时看到文档的渲染效果。
Markdown 语法高亮：Typora 会自动对 Markdown 语法进行高亮显示，便于用户识别和编辑。
表格和代码块：用户可以通过快捷键或右键菜单快速插入表格和代码块，并设置代码块的语言以进行语法高亮。
插入图片和链接：用户可以使用 Markdown 语法插入图片和链接，支持本地图片和网络图片，以及相对路径和绝对路径的链接。
使用快捷键：掌握并使用 Typora 的快捷键可以大大提高编辑效率，如使用 Ctrl+B 加粗文本，Ctrl+I 斜体文本等。

# 5、Typora 快捷键支持

TIP

基础快捷键与一般的文档类似，专属快捷方式如下

# 5.1、基本文件操作

快捷键	功能描述
Ctrl+N	新建文件
Ctrl+Shift+N	新建窗口
Ctrl+O	打开文件
Ctrl+P	快速打开（历史文件）
Ctrl+S	保存文件
Ctrl+Shift+S	另存为
Ctrl+W	关闭文件

# 5.2、编辑操作

快捷键	功能描述
Ctrl+Z	撤销
Ctrl+Y	重做
Ctrl+X	剪切
Ctrl+C	复制
Ctrl+V	粘贴
Ctrl+A	全选
Ctrl+D	选中当前词
Ctrl+L	选中当前行/句
Ctrl+E	选中当前格式文本

# 5.3、段落与标题设置

快捷键	功能描述
Ctrl+1	设置一级标题
Ctrl+2	设置二级标题
Ctrl+3	设置三级标题
Ctrl+4	设置四级标题
Ctrl+5	设置五级标题
Ctrl+0	段落（取消标题设置）
Ctrl+=	提升标题等级
Ctrl+-	降低标题等级

# 5.4、文本格式设置

快捷键	功能描述
Ctrl+B	加粗
Ctrl+I	斜体
Ctrl+U	下划线
Alt+Shift+5	删除线
Ctrl+Shift+`	行内代码
Ctrl+K	插入链接
Ctrl+Shift+I	插入图片
Ctrl+\	清除样式

# 5.5、导航与查找

快捷键	功能描述
Ctrl+Home	跳转到文首
Ctrl+End	跳转到文末
Ctrl+F	查找
F3	查找下一个
Shift+F3	查找上一个

# 5.6、视图与扩展功能

快捷键	功能描述
Ctrl+/	切换源代码模式
F8	专注模式
F9	打字机模式
F11	切换全屏
Ctrl+Shift+L	显示/隐藏侧边栏
Ctrl+Shift+1	大纲视图
Ctrl+Shift+2	文档列表视图
Ctrl+Shift+3	文件树视图
Ctrl+Tab	应用内窗口切换
Shift+F12	打开 DevTools

# 6、如何高效地使用 Typora 书写 Markdown 文档

TIP

熟悉 Markdown 语法：掌握 Markdown 的基本语法和 Typora 的扩展语法，能够高效地编写和格式化文档。
使用快捷键：充分利用 Typora 的快捷键，减少鼠标操作，提高编辑效率。
实时预览和调整：利用 Typora 的实时预览功能，边写边预览，及时调整格式和布局。
自定义配置：根据自己的写作习惯和需求，自定义 Typora 的配置和快捷键，使写作更加顺畅和高效。
定期保存和备份：养成定期保存和备份文档的好习惯，避免意外丢失数据。

← HTML/HTML5 常用标签和属性 Git 项目管理快速入门 →

大厂最新技术学习分享群

微信扫一扫进群，获取资料

# MarkDown 从入门 到 精通，完整版图文教程

# 一、什么是 Markdown

# 1、MarkDown 创始人介绍

# 2、约翰·格鲁伯 John Gruber 个人成就

# 2.1、Markdown 语言的创建

# 2.2、科技博客 与 播客的创作

# 2.3、软件开发 与 贡献

# 2.4、苹果产品评论 与 社区影响

# 3、为什么要用 MarkDown

# 4、MarkDown 的使用场景

# 5、支持 Markdown 的工具

# 6、Markdown 文件的工作原理

# 二、Markdown 的基本语法

# 1、分级标题

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

# 2、段落

# 3、换行符

# 4、字体设置

# 4.1、强调（加粗）

# 4.2、斜体

# 4.3、删除线

# 4.4、下划线

# 4.5、文字高亮

# 4.6、字体、字号、颜色

# 6、外链接

# 6.1、为链接添加标题

# 6.2、URL 和 电子邮件地址

# 6.3、格式化链接

# 7、插入图像

# 8、链接图像

# 9、引用块

# 9.1、带有多个段落的引用块

# 9.2、嵌套引用块

# 9.3、带有其他元素的引用块

# Markdown 语法的学习

# 10、列表 - 有序列表

# 11、列表 - 无序列表

# 12、分割线

# 13、代码块

# 13.1、单行代码块

# 13.2、块级代码块（多行）

# 三、MarkDown 进阶语法

# 1、转义字符（显示特殊符号）

# 2、表格

# 2.1、基础表格

# 2.2、带对齐方式的表格

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

# 3、脚注

# 3.1、语法

# 3.2、应用场景

# 4、上标

# 5、下标

# 6、Task Lists 任务列表（待办事宜 Todo 列表）

# 6.1、语法

# 6.2、应用场景

# 7、锚点

# 7.1、语法

# 7.2、应用场景

# 8、内容目录

# 四、MarkDown 高级语法

# 1、LaTeX 公式

# 1.1、行内公式

# 1.2、行间公式

# 1.3、常用符号与命令

# 2、LaTeX 应用场景

# 2.1、学术论文

# 2.2、技术文档

# 2.3、博客与网站

# 2.4、教育材料

# 3、基础数学表达式

# 3.1、分数

# 3.2、根号

# 3.3、上标 与 下标

# 3.4、求和 与 积分

# 4、复杂数学公式

# MarkDown 从入门到精通，完整版图文教程

# 2.2、科技博客与播客的创作

# 2.3、软件开发与贡献

# 2.4、苹果产品评论与社区影响

# 6.2、URL 和电子邮件地址

# 3.3、上标与下标

# 3.4、求和与积分

# 1.3、绘制流程图的步骤及应用案例

# 2、平台与版本支持