一、作者前言

众所周知，CSDN用的是Markdown编辑器，早期刚开始我在CSDN写文章的时候，我并没有意识到这个编辑器有什么特别，纯粹把它当做office来使用，后面写东西的时候才发现，有很多office的功能根本无法实现，之后查了一些Python资料的时候才发现，有些朋友居然可以做一些特别的显示表现，所以我特地研究了一下这个Markdown编辑器，并做了以下的教程

---

二、介绍Markdown

1.Markdown简介

Markdown 是一种轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）。 它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML（或者HTML）文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。
由于 Markdown 的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。 如 GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等，甚至还能被使用来撰写电子书。

---

2.Markdown优势

Markdown不止是HTML的简化版，更重要的是txt的升级版、Word的轻量版，是笔记的最佳载体。作为一种简单的格式标记语言，不同于HTML的复杂标记，不同于txt的无格式、也不同于Word的复杂样式调整。Markdown 通过简单的几个字符键入，就可以快捷的定义文档的样式。掌握 Markdown，你可以享受到简洁之美、享受效率的提升。世界上最流行的博客平台WordPress和大型CMS如Joomla、Drupal都能很好的支持Markdown。完全采用Markdown编辑器的博客平台有Ghost和Typecho等。Markdown可以快速转化为演讲PPT、Word产品文档甚至是用非常少量的代码完成最小可用原型。Markdown 使用少量简单的语法 对文本进行样式化 。大多数情况下，Markdown 只是普通的文本，加上一些非字母字符，比如 # 、* 、- 等。Markdown 语法的种类很少，只对应 HTML 标记的一小部分。Markdown 的理念是，能让文档更容易读、写和随意改。HTML 是一种发布的格式，Markdown 是一种书写的格式。就这样，Markdown 的格式语法只涵盖纯文本可以涵盖的范围。不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 书写。

---

2.1 使用 Markdown 的优点

• 内容与格式分离，专注你的文字内容而不是排版样式，安心写作。
• 轻松导出 HTML、PDF 等多种格式的文件和本身的 .md 源文件。
• 纯文本内容，兼容所有的文本编辑器与文字处理软件。
• 可读、直观、学习成本低。

---

3.Markdown发展历程

John Gruber在2004年创造了Markdown语言，在语法上有很大一部分是跟亚伦·斯沃茨（Aaron Swartz）共同合作的。这个语言的目的是希望大家使用“易于阅读、易于撰写的纯文字格式，并选择性的转换成有效的XHTML（或是HTML）”。 其中最重要的设计是可读性，也就是说这个语言应该要能直接在字面上的被阅读，而不用被一些格式化指令标记（像是RTF与HTML）。 因此，它是现行电子邮件标记格式的惯例，虽然它也借鉴了很多早期的标记语言，如：Setext、Texile、reStructuredText。

3.1 标准化

Markdown已经成为典型的转换为HTML的非正式规范 [1]和参考实现。随着时间的推移，出现了许多Markdown实现。人们开发这些主要是由于在基本语法之上需要额外的功能 - 例如表格，脚注，定义列表（技术上的HTML描述列表）和HTML块内的Markdown。其中一些行为偏离了最开始的参考实现。与此同时，非正式规范中的一些含糊不清引起了人们的注意 [2]。这些问题促使Markdown解析器的一些开发人员努力实现标准化。
2016年3月发布了RFC 7763和RFC 7764。RFC 7763 从原始变体引入了MIME类型 text/markdown。RFC 7764讨论并注册了MultiMarkdown、GitHub Flavored Markdown (GFM)、Pandoc、CommonMark及Markdown等变体。 [3]

3.2 CommonMark

从2012年开始，包括Jeff Atwood和John MacFarlane在内的一群人启动了标准化工作。 [4]一个社区网站旨在记录可用于文档作者和开发人员的各种工具和资源，以及各种markdown实现的实现者。 [5]2014年9月，Gruber反对在这一工作中继续使用“Markdown”这个名字，其被更名为CommonMark。 [6]CommonMark发布了规范、参考实现和测试包的几个版本，并计划在2018年宣布最终的1.0规范和测试包。 [7]

3.3 GFM

2017年，GitHub发布了基于CommonMark的GitHub Flavored Markdown（GFM）的正式规范。 [8]除了表格、删除线、自动链接和任务列表被GitHub规范作为扩展添加之外，它遵循CommonMark规范。 [9]GitHub还相应地更改了其站点上使用的解析器，这要求更改某些文档 - 例如，GFM要求创建标题的哈希符号由空格字符分隔。

3.4 Markdown Extra

Markdown Extra是一种轻量级标记语言，基于在PHP（最初）、Python和Ruby中实现的Markdown。它添加了普通Markdown语法不具备的功能。内容管理系统支持Markdown Extra，例如Drupal，TYPO3和MediaWiki。

它为Markdown添加了以下功能：

• HTML块内的markdown标记
• 具有id / class属性的元素
• 围栏代码块
• 表格
• 定义清单
• 脚注
• 缩写

---

4.Markdown应用场景

4.1 在线阅读

• 文章资讯（集成支持 Markdown 写作工具的在线平台，如在 CSDN、博客园等平台写作发布的博文资讯，GitBook等发布的系列文档）
• 帮助文档（README.md，GitHub等项目附带的说明文档，可在线预览及本地阅读）

4.2 文本编辑

• 轻量编辑（少量的图文排版和样式调整，简化编辑流程，用于简洁的文档输出。对应的，不适合需要使用到大量内容及繁多样式调整的复杂编辑！此时适宜使用Word等软件进行处理）
• 方便编辑与分发（基于纯文本内容，不限制平台、编辑器及其版本，同一文件可在任意文本编辑器进行编辑。而完成编辑的文件可渲染输出 HTML 页面或转换为PDF等其他格式，方便在不同平台间共享和阅读）
• 快速发布（一次编辑、任意导入，对于集成 Markdown 编辑器的任意在线平台，可将源文档直接录入，对内容不作较大改动的情况下进行快速发布，满足源文档信息保存及内容发布需求）

---

5.Markdown适用人群

程序员、科研工作者（使用较多，技术文档、技术博客等）
博客博主（写博文）
作家（撰写文章、书籍等）
学生（辅助LaTeX 数学公式，笔记、论文等）
其他（文字录入、笔记整理等）

---

三、Markdown语法

1.标题

要创建标题，只要在标题文本前添加 1~6个 # 字符即可，使用 #的数量 将决定标题的大小，总共六级标题。建议在#号后加一个空格，这是标准的 Markdown语法。

代码示例：标题

效果显示：标题

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

---

2.文本

---

2.1 斜体文本（又名：强调文本）

用 2个星号 * 或 2个下划线 _ 包含一段文本就是 斜体文本 的语法，

斜体文本：强调文本 强调文本

---

2.2 粗体文本

用 4个星号 * 或 4个下划线 _ 包含一段文本就是 粗体文本 的语法，

粗体文本：粗体文本 粗体文本

---

2.3 标记文本

用 4个等号 包含一段文本就是 标记文本 的语法，

标记文本：标记文本

---

2.4 删除文本

用 4个波浪号 包含一段文本就是 删除文本 的语法，

删除文本：删除文本

---

2.5 引用文本

用 1个大于号 >前置一段文本就是 引用文本 的语法，

引用文本：> 引用文本

---

2.6 下划线文本

使用 HTML 标签 <u> 包含一段文本就是下划线的语法。

下划线文本：下划线文本

---

2.7 上缩文本

用 2个乘方号 ^包含一段文本就是 上缩文本 的语法，

上缩文本：2¹⁰ 运算结果是 1024。

---

2.8 下缩文本

用 2个波浪号 ~包含一段文本就是 下缩文本 的语法，

下缩文本：H₂O is是液体。

---

2.9 键盘文本

用 <kbd>一段文本</kbd> 包含一段文本就是 键盘文本 的语法，

键盘文本：使用 HTML 的 标签。

---

2.10 内容换行

除了回车换行在段落间使用空行分隔不同内容外，还可使用 HTML 标签
来添加多个空行、以明确区分内容关联度。

第一行<br>自动分隔第二行

---

2.11 标红

标红：标红

---

2.12 标黄

<mark> 标黄 </mark>
标黄： 标黄

---

3.列表

Markdown的列表支持有序列表、无序列表以及待办列表。
行尾回车换行后会自动接续列表，再次按Tab会标记段落并更换列表符/再次按回车会清除列表符以作换行。

---

3.1 有序列表

有顺序的列表，使用 数字、英文句点 后面加一个 空格 作为列表标记。
需要注意的是，用于标记列表的实际数字对Markdown输出的HTML结果没有任何影响。顺序不等或相同的数字都将得到完全相同的HTML输出。

代码示例：有序列表

效果显示：有序列表

1. 项目1
2. 项目2
3. 项目3

---

3.2 无序列表

无序列表：就是列表不排序，使用 减号 - 、星号 * 或 加号 + 作为列表标记，符号后须加上 空格。
无序列表有3种列表符，分别用于表示1级列表、2级列表、3级列表。

代码示例：无序列表

效果显示：无序列表

• 1级列表1
  • 2级列表1
  • 2级列表2
    • 3级列表1
    • 3级列表2
• 1级列表2
• 1级列表3

---

3.2 待办任务列表

待办任务列表：非常实用，管理待办已办非常便利。
在列表项目前面加 1个减号 - 及 空格 、并紧跟 方括号 [ ] 作为待办任务标记，使用 [x] 将任务标记为已完成。

代码示例：待办列表

效果显示：待办列表

• 计划任务
• 完成任务

---

4.图片

4.1 图片

代码示例：图片

![Alt](https://img-home.csdnimg.cn/images/20220524100510.png)

效果显示：图片
图片:

---

4.2 带尺寸的图片

代码示例：带尺寸的图片

效果显示：带尺寸的图片
![Alt](https://img-home.csdnimg.cn/images/20220524100510.png =60x60)
带尺寸的图片:
![Alt](https://img-home.csdnimg.cn/images/20220524100510.png =60x)
宽度确定高度等比例的图片:
高度确定宽度等比例的图片:

---

4.3 居中、居右的图片

代码示例：居中、居右的图片

效果显示：居中、居右的图片
![Alt](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center)
居中的图片:
![Alt](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center =60x60)
居中并且带尺寸的图片:
![Alt](https://img-home.csdnimg.cn/images/20220524100510.png#pic_right)
居右的图片:

---

5.链接

代码示例：链接

链接: [link](https://www.csdn.net/)
效果显示：链接
链接: link

---

6.目录

标题索引（内容目录）：合理的创建标题，有助于目录的生成。使用 [TOC] 以创建当前文档目录（由于编辑器的差异，对目录创建的语法支持及语法规则应视实际使用的编辑器而定）。

代码示例：目录

效果显示：目录

---

7.代码片

代码示例：代码片

效果显示：代码片

下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
var foo = 'bar';

---

8.表格

代码示例：表格

效果显示：表格

项目	Value
电脑	$1600
手机	$12
导管	$1

Column 1	Column 2
centered 文本居中	right-aligned 文本居右

---

9.注脚

代码示例：注脚

效果显示：注脚

一个具有注脚的文本。¹

---

10.注释

代码示例：注释

效果显示：注释

Markdown将文本转换为 HTML。

---

11.自定义列表

代码示例：自定义列表

效果显示：自定义列表

Markdown

Text-to- HTML conversion tool

Authors

John

Luke

---

12.LaTeX 数学公式

代码示例：LaTeX 数学公式

效果显示：LaTeX 数学公式

Gamma公式展示 $\Gamma (n)=(n-1)!\forall n\in \mathbb{N}$ 是通过 Euler integral

$$\Gamma (z)={\int }_0^{\infty }{t}^{z-1}{e}^{-t}dt.$$

---

13.插入甘特图

代码示例：插入甘特图

效果显示：插入甘特图

---

14.插入UML图

代码示例：插入UML图

效果显示：插入UML图

---

15.插入Mermaid流程图

代码示例：插入Mermaid流程图

效果显示：插入Mermaid流程图

---

16.插入Flowchart流程图

代码示例：插入Flowchart流程图

效果显示：插入Flowchart流程图

---

17.插入类图

代码示例：插入类图

效果显示：插入类图

---

18.快捷键

Markdown	图标	快捷键
撤销		Ctrl /⌘+Z
重做		Ctrl /⌘+Y
加粗		Ctrl /⌘+B
斜体		Ctrl /⌘+I
标题		Ctrl /⌘+Shift +H
有序列表		Ctrl /⌘+Shift +O
无序列表		Ctrl /⌘+Shift +U
待办列表		Ctrl /⌘+Shift +C
插入代码		Ctrl /⌘+Shift +K
插入链接		Ctrl /⌘+Shift +L
插入图片		Ctrl /⌘+Shift +G
查找		Ctrl /⌘+F
替换		Ctrl /⌘+G

---

1. 注脚的解释 ↩︎