🍁重温Markdown语法与技巧

💖简介

Markdown是一种轻量级的标记语言，由John Gruber于2004年创建。它的设计目标是让人们能够使用易读易写的纯文本格式编写文档，并且可以通过工具将其转换为结构化的HTML（超文本标记语言）文档或其他格式。

📖中文网

https://www.markdown.cn/
https://markdown.com.cn/

👉特点

• 简洁性：Markdown的语法非常简单，它仅包含少量的符号来表示文本格式，如标题、列表、链接、图片等。这使得写作者可以专注于内容本身而非排版细节。
• 可读性：即使不经过任何渲染，Markdown文本也易于阅读，因为它尽量保持了纯文本的原貌，避免了复杂的标签和格式化指令。
• 多功能性：Markdown 文件通常以.md或.markdown扩展名保存，并且可以在几乎所有的文本编辑器中打开。此外，许多平台和应用程序都支持Markdown格式，比如GitHub、GitLab、Stack Overflow等网站，以及一些博客系统和Wiki平台。
• 跨平台兼容性：由于Markdown文件本质上是纯文本文件，因此它们与操作系统无关，可以在不同的设备和平台上轻松共享和协作。
• 易于版本控制：Markdown文件适合纳入版本控制系统，如Git，因为它们是纯文本格式，便于追踪更改历史。
• 扩展性：虽然标准的Markdown语法相对固定，但很多Markdown编辑器和处理器提供了额外的功能，例如表格、脚注、定义列表、任务列表、数学公式、Mermaid图表等高级特性。
• 输出多样性：通过适当的工具，Markdown文档可以被转换成多种格式，包括但不限于 HTML、PDF 和 Word 文档。

⭐语法

🌟标题

使用#来表示标题级别，从一级到六级标题分别对应一个到六个#。

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

效果

🌟自定义ID标题

Markdown处理器支持标题的自定义ID，要添加自定义标题ID，请在与标题相同的行上用大括号括起该自定义ID。
可以通过url后接#ID方法跳转至页面锚点处。

### 自定义标题测试 {#test}

效果

自定义标题测试

🌟强调

用星号*或下划线_来包裹文字来表示斜体或粗体。

• 斜体：*斜体文字* 或 _斜体文字_
• 粗体：**粗体文字** 或 __粗体文字__
• 粗斜体：***粗斜体文字*** 或 ___粗斜体文字___

效果

• 斜体：斜体文字 或 斜体文字
• 粗体：粗体文字 或 粗体文字
• 粗斜体：粗斜体文字 或 粗斜体文字

🌟段落

使用空白行将一行或多行文本进行分隔

段落一

段落二

效果

段落一

段落二

🌟换行

在一行的末尾添加两个或多个空格，然后按回车键,即可创建一个换行

这是直接换行的  
效果

效果

这是直接换行的
效果

也可以使用HTML标签<br>来实现换行

这是使用br标签换行的<br>效果

效果

这是使用br标签换行的
效果

🌟列表

• 无序列表使用星号*、加号+或减号-；
• 有序列表则使用数字加英文句点.(数字不必按数学顺序排列，但是列表应当以数字1起始)

* 项目1
* 项目2
    - 子项目1
    - 子项目2

+ 项目一
+ 项目二

1. 第一项
1. 第二项
3. 第三项

效果

• 项目1
• 项目2
  • 子项目1
  • 子项目2

• 项目一
• 项目二

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

列表中可以嵌套其他元素：段落、引用、代码块、图片等

🌟引用

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

> 这是一个引用示例

效果

这是一个引用示例

嵌套引用

块引用可以嵌套使用，在要嵌套的段落前添加>>。

> 第一层引用
>> 第二层嵌套引用
>>> 第三层嵌套引用

效果

第一层引用

第二层嵌套引用

第三层嵌套引用

引用中使用其他元素

引用块中可以包含其他Markdown格式的元素（标题、列表、代码等），但并非所有元素都可以使用。

> #### 引用中的标题
> - 列表项一
> - 列表项二
>
> *斜体* 和 **粗体** 也可以使用

效果

引用中的标题

• 列表项一
• 列表项二

斜体 和 粗体 也可以使用

🌟代码

• 单行代码标注使用`
• 多行代码块标注使用 ```，可添加对应语言，实现代码高亮

`test`

```java
System.out.println("代码块");
```

效果

短语

System.out.println("代码块");

如果代码标注中需要包含一个或多个反引号，可以在外层使用是多添加一个反引号，内容前后加空格；
短语使用两个反引号；代码块使用四个反引号。

🌟链接

• 链接文本放在中括号内，链接地址放在后面的括号中，链接title可选。
• 链接也可和强调联合使用

[这是一个链接](https://www.cnblogs.com/zktww "这是链接title")

**[这是一个加粗链接](https://www.cnblogs.com/zktww "这是加粗链接title")**

效果

这是一个链接

这是一个加粗链接

参考式链接

参考式链接将链接地址集中管理，正文更简洁，适合同一链接多次引用的场景。

[博客园][blog] 是一个面向开发者的知识分享社区，和 [GitHub][gh] 一样值得常逛。

[blog]: https://www.cnblogs.com "博客园"
[gh]: https://github.com "GitHub"

效果

博客园 是一个面向开发者的知识分享社区，和 GitHub 一样值得常逛。

自动链接

使用尖括号<>可以快速将URL或邮箱地址转换为可点击的链接。

<https://www.cnblogs.com>
<fake@example.com>

效果

https://www.cnblogs.com
fake@example.com

🌟图片

图片和链接格式相似，多了一个!前缀

![这是一个图片](https://s1.xiaomiev.com/activity-outer-assets/0328/images/Ultra_U/pc/ultra_1.jpg "这是图片title")

效果

图片尺寸控制

标准Markdown不支持设置图片尺寸，可以使用HTML的<img>标签来控制宽高。

<img src="https://s1.xiaomiev.com/activity-outer-assets/0328/images/Ultra_U/pc/ultra_1.jpg" width="300" alt="控制宽度的图片">

效果

图片链接

将图片嵌套在链接语法中，实现点击图片跳转。

[![图片链接](https://img.shields.io/badge/Markdown-Guide-blue)](https://www.markdown.cn/)

效果

🌟分隔线

可以通过三种方式创建分割线：单行连续三个或更多的 *,-, 或者_。

***

---

_________________

效果

---

---

---

🌟删除线

在要删除内容前后使用两个波浪号~~

这是要~~删除的内容~~

效果

这是要删除的内容

🌟表格

• 使用三个或多个连字符（---）创建每列的标题，并使用管道（|）分隔每列；
• 可以在标题行中的连字符的左侧，右侧或两侧添加冒号（:），将列中的文本对齐到左侧，右侧或中心；
• 可以联合单行代码、链接使用。

| 第一列 | 第二列     | 第三列  |
| :---  |    :----:  |   ---: |
| 居左1   | 居中1       | 居右1   |
| 这是`代码`   | 这是`代码`     | [这是链接]()   |

效果

第一列	第二列	第三列
居左1	居中1	居右1
这是代码	这是代码	这是链接

🌟任务列表

• 创建任务列表，请在任务列表项之前添加破折号-和方括号[ ]，并在[ ]前面加上空格。
• 要选择一个复选框，请在方括号[x]之间添加 x。

- [ ] 未选中任务
- [x] 选中任务

效果

• 未选中任务
• 选中任务

🌟定义列表

创建定义列表，请在第一行上键入术语。在下一行，键入一个冒号:，后跟一个空格和定义。

术语名称
: 这是术语的详细解释

效果

术语名称

这是术语的详细解释

🌟表情

• 从相关Emoji表情网站复制粘贴即可
• 也可以使用表情符号简码
  https://gist.github.com/rxaviers/7360908

😊
:smirk:

效果

😊
😏

🌟转义字符

• 显示原本用于格式化Markdown文档的字符，在字符前面添加反斜杠字符\
• 可以转义的字符：\，`，*，_，{ }，[ ]，( )，#，+，-，.，!，|

\* 转义

效果

* 转义

🌟内嵌HTML

对于Markdown涵盖范围之外的标签，都可以直接在文档里面用HTML撰写。常用标签包括：<span>、<cite>、<del>、<a>、<img>、<div>、<table>、<pre>、<p>、<kbd>、<sup>、<sub>等。

<kbd>Ctrl</kbd> + <kbd>C</kbd> 复制

<mark>这是使用mark标签的高亮文本</mark>

<font color="red">红色文字</font>

<center>居中文本</center>

<details>
<summary>点击展开详情</summary>
这里是折叠的内容，点击上方标题即可展开或收起。
</details>

效果

Ctrl + C 复制

这是使用mark标签的高亮文本

红色文字

居中文本

点击展开详情

这里是折叠的内容，点击上方标题即可展开或收起。

注意：在HTML块级标签内的Markdown语法将不会被解析。行级标签内的Markdown语法可以正常解析。

🌟数学公式

• 支持LaTeX数学表达式，需要渲染引擎如MathJax支持
• 行内公式：使用$包围公式。
• 独立公式：使用$$包围公式，使公式单独占据一行。

这是一个行内公式 $E=mc^2$。
$$ E=mc^2 $$

效果

这是一个行内公式 \(E=mc^2\)。

\[E=mc^2 \]

🌟Mermaid绘图

• Mermaid是一种允许用户以文本方式定义图表的工具，
• 各图表具体使用方法见官方文档：
  https://mermaid.js.org/
  https://github.com/mermaid-js/mermaid

```Mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

流程图效果

graph TD; A-->B; A-->C; B-->D; C-->D;

时序图效果

sequenceDiagram participant 客户端 participant 服务器 客户端->>服务器: 请求数据 服务器-->>客户端: 返回数据

Mermaid支持的图表类型包括：流程图（graph/flowchart）、时序图（sequenceDiagram）、甘特图（gantt）、类图（classDiagram）、状态图（stateDiagram）、饼图（pie）、ER图（erDiagram）、Git图（gitGraph）等。

🌟高亮

高亮单词，在单词前后使用两个等号 ==

这是一个==高亮示例==。

效果

这是一个高亮示例。

🌟下标

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

H~2~O

效果

H₂O

注意：一些 Markdown 应用程序在单词前后使用一个波浪号，不是用于下标，而是用于删除线。

🌟上标

创建上标，请在字符前后使用一个插入符号 ^。

X^2^

效果

X²

🌟脚注

• 在方括号（[^1]）内添加插入符号和标识符。标识符可以是数字或单词，但不能包含空格或制表符。
• 标识符仅将脚注参考与脚注本身相关联-在输出中，脚注按顺序编号。
• 在括号内使用另一个插入符号和数字添加脚注，并用冒号和文本[^1]: My footnote。

这是一个数字脚注[^1] ；这是一个文字脚注[^脚注]

[^1]: 数字脚注，也可以加`代码`.
[^脚注]: 文字脚注.

效果

这是一个数字脚注^[1] ；这是一个文字脚注^[2]

🌟目录

部分Markdown编辑器和平台支持自动生成目录，在文档中插入[TOC]标记即可根据标题层级生成目录。

[TOC]

注意：[TOC]并非标准Markdown语法，GitHub不支持此写法。GitHub上可以使用标题锚点链接手动创建目录：

- [简介](#简介)
- [特点](#特点)
- [语法](#语法)
  - [标题](#标题)
  - [强调](#强调)

🌟锚点跳转

每个标题都会自动生成锚点，可以通过链接在文档内跳转。中文标题直接使用中文作为锚点。

跳转到[简介](#简介)部分

跳转到[Mermaid绘图](#mermaid绘图)部分

效果

跳转到简介部分

跳转到Mermaid绘图部分

注意：锚点规则 — 空格转为-，字母全部小写，特殊字符会被忽略。

🛠️常用编辑器与工具

工具	类型	说明
Typora	桌面编辑器	所见即所得，实时预览，支持多种主题
VS Code	代码编辑器	通过插件（如Markdown All in One）支持预览和快捷操作
Obsidian	笔记工具	双向链接、知识图谱，基于本地Markdown文件
Mark Text	桌面编辑器	开源免费，所见即所得，支持Mermaid图表
Notion	在线协作	支持Markdown快捷输入，团队协作功能强大
语雀	在线文档	支持Markdown快捷键，阿里系知识管理工具
Pandoc	格式转换	万能文档转换工具，支持Markdown转PDF/Word/HTML等

---

结束

---

1. 数字脚注，也可以加代码. ↩︎

2. 文字脚注. ↩︎