markdown 后缀名是 .md
https://stackedit.cn/ stackedit 在线版本
https://www.oschina.net/p/stackedit?hmsr=aladdin1e1
来自 https://www.bilibili.com/video/BV1JA411h7Gw/?spm_id_from=333.337.search-card.all.click&vd_source=346847773d1f74962a4daab9ddf7f228
Markdown 教程
什么是 Markdown？ Markdown 是一种轻量级标记语言，创始人为约翰·格鲁伯。它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML（或者 HTML）文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。
由于 Markdown 的轻量化、易读易写特性，并且对于图片，图表、数学式都有支援，目前许多网站都广泛使用 Markdown 来撰写说明文件或是用于论坛上发表讯息。如何方的个人小站 、GitHub 、Reddit 、Stack Exchange 、OpenStreetMap 、SourceForge 、简书 等，甚至还能被用来撰写电子书。
何方的个人小站除了首页 和工具 ，大都是用 Markdown 完成的
Markdown 如今已成为世界上最受欢迎的标记语言之一。
专注于文字内容；
纯文本，易读易写，可以方便地纳入版本控制；
语法简单，没有什么学习成本，能轻松在码字的同时做出美观大方的排版。
Markdown 与 World 不同，Markdown 不像 World 是所见是所得的。如果需要把一段文本加粗，在 World 中，点击工具栏的加粗图标，内容就会被加粗。而在 Markdown 中我们可以使用在文本前后添加两个星号（**粗体**，粗体 ）来达到同样的目的。
和 World 需要使用 Microsoft Office、WPS 等工具不同，Markdown 可以使用任何在线或本机的文本编辑器。比如下图是何方的个人小站的在线 Markdown 编辑器 ，我们后面的内容都以它做为演示工具。
图1 在线Markdown工具
为什么要用 Markdown？ 当你可以通过按下界面中的按钮来设置文本格式时，为什么还要使用 Markdown 来书写呢？使用 Markdown 而不是 word 类编辑器的原因有：
Markdown 无处不在 。StackOverflow、CSDN、掘金、简书、GitBook、有道云笔记、V2EX、光谷社区等。主流的代码托管平台，如 GitHub、GitLab、BitBucket、Coding、Gitee 等等，都支持 Markdown 语法，很多开源项目的 README、开发文档、帮助文档、Wiki 等都用 Markdown 写作。
Markdown 是纯文本可移植的 。几乎可以使用任何应用程序打开包含 Markdown 格式的文本文件。如果你不喜欢当前使用的 Markdown 应用程序了，则可以将 Markdown 文件导入另一个 Markdown 应用程序中。这与 Microsoft Word 等文字处理应用程序形成了鲜明的对比，Microsoft Word 将你的内容锁定在专有文件格式中。
Markdown 是独立于平台的 。你可以在运行任何操作系统的任何设备上使用任何文本工具创建 Markdown 格式的文本。
Markdown 能适应未来的变化 。即使你正在使用的应用程序将来会在某个时候不能使用了，你仍然可以使用文本编辑器读取 Markdown 格式的文本。当涉及需要无限期保存的书籍、大学论文和其他里程碑式的文件时，这是一个重要的考虑因素。
用什么写 Markdwon？ 上面我们说可以在运行任何操作系统的任何设备上使用任何文本工具创建 Markdown 格式的文本 ，我们确实可以使用任何 文本工具创建 Markdown 文件，如果你想用 echo "内容" >> file.md 都可以。但使用一些具备代码高亮和实时预览功能的编辑器，可以让我们更加优雅和快速的编写 Markdown。
用 Markdown 最多的应该是程序员了(哪个程序员还没有写过文档)，一般程序员用的 IDE，诸如 VS Code、IDEA、Android Studio 等都内置了 Markdown 高亮和预览功能，下面是一些好用的 Markdown 工具。
编程/文本工具
Visual Studio Code
IntelliJ IDEA （包括 Android Studio 、WebStorm 等）
Sublime Text
Nodepad++
Atom
在线编辑器
何方的个人小站
Markdown 中文网站
Editor.md
小书匠
菜鸟工具
MaHua
其他软件
MarkdownPad
BookPad
小书匠
Typora
来自 https://iamhefang.cn/tutorials/markdown/
1.1 常用语法 Markdown 的标题和 HTML 的标题一致，分为 6 级。分别在一行的开头放 1 到 6 个 # 加空格再加标题内容。
Markdown HTML 预览 # 标题 1<h1>标题 1</h1>标题 1 ## 标题 2<h2>标题 2</h2>标题 2 ### 标题 3<h3>标题 3</h3>标题 3 #### 标题 4<h4>标题 4</h4>标题 4 ##### 标题 5<h5>标题 5</h5>标题 5 ###### 标题 6<h6>标题 6</h6>标题 6
在Markdown编辑器中打开 1.2 可选语法 标题内容的后面如果也存在空格和 #，也可以构成标题，且标题的级别以前面 # 的数量为准。
Markdown HTML 预览 # 标题 1 ##<h1>标题 1</h1>标题 1 ## 标题 2 ##<h2>标题 2</h2>标题 2 ### 标题 3 ###<h3>标题 3</h3>标题 3 #### 标题 4 ####<h4>标题 4</h4>标题 4 ##### 标题 5 #####<h5>标题 5</h5>标题 5 ###### 标题 6 ######<h6>标题 6</h6>标题 6
除了前面加 # 外，标题 1 和标题 2 也可以用下面加横线的形式。标题下面加等号 = 会生成标题 1，加减号 - 会生成标题 2。等号和减号的数量一般不限制，可以有一个或多个。
Markdown HTML 预览 标题 1===<h1>标题 1</h1>标题 1 标题 2---<h2>标题 2</h2>标题 2
在Markdown编辑器中打开 1.3 自定义标题 id Markdown HTML 预览 # 标题 1 {#head1}<h1 id="head1">标题 1</h1>标题 1 ## 标题 2 {#head2}<h2 id="head2">标题 2</h2>标题 2 ### 标题 3 {#head3}<h3 id="head3">标题 3</h3>标题 3 #### 标题 4 {#head4}<h4 id="head4">标题 4</h4>标题 4 ##### 标题 5 {#head5}<h5 id="head5">标题 5</h5>标题 5 ###### 标题 6 {#head6}<h6 id="head6">标题 6</h6>标题 6
在Markdown编辑器中打开 注意 在有些 Markdown 解析器里面，# 和内容之间不加空格也可以识别为标题，但大部分解析器都是需要加空格的，为了兼容性更强我们一般在写标题时都加空格。
5.1 有序列表 在文本前面添加数字加点加空格可以构成有序列表。如下表，最终生成的列表前面的编号和前面的数字没有绝对关系，总是从第一个数字开始依次增加。
也有很多 Markdown 解析器完全忽略前导数字，总是从 1 开始。
Markdown HTML 预览 1. 有序列表项 12. 有序列表项 2<ol><li>有序列表项 1</li><li>有序列表项 2</li></ol>有序列表项 1
有序列表项 2
1. 有序列表项 11. 有序列表项 2<ol><li>有序列表项 1</li><li>有序列表项 2</li></ol>有序列表项 1
有序列表项 2
5. 有序列表项 16. 有序列表项 2<ol start="5"><li>有序列表项 1</li><li>有序列表项 2</li></ol>有序列表项 1
有序列表项 2
在Markdown编辑器中打开 5.2 无序列表 无序列表可以在文本前面加减号(-)、星号(*)、加号(+)实现。
Markdown HTML 预览 - 无序列表项 1- 无序列表项 2<ul><li>无序列表项 1</li><li>无序列表项 2</li></ul>* 无序列表项 1* 无序列表项 2<ul><li>无序列表项 1</li><li>无序列表项 2</li></ul>+ 无序列表项 1+ 无序列表项 2<ul><li>无序列表项 1</li><li>无序列表项 2</li></ul>
在Markdown编辑器中打开 5.3 列表嵌套 有序列表、无序列表都是可以嵌套的。在列表项前面添加两个以上空格或制表符可以把该行变成子列表。
Markdown HTML 预览 1. 有序列表项 1 1. 有序列表项 2<ol><li><ul><li></li></ul></li></ol>有序列表项 1
有序列表项 2
- 无序列表项 1 - 无序列表项 2<ul><li><ul><li></li></ul></li></ul>
在Markdown编辑器中打开 5.4 任务列表 有序列表和无序列表都可以做为任务列表使用，任务列表会在每项前面添加一个复选框
下面的 Markdown 代码
** 有序任务列表 ** 1. [x] 已选中的项目 1. [ ] 未选中的项目 ** 无序任务列表 ** - [x] 已选中的项目 - [ ] 未选中的项目 会生成下面的效果
有序任务列表
无序任务列表
在Markdown编辑器中打开 5.5 定义列表 下面的 Markdown 代码
列表头 1 : 列表项 11 : 列表项 12 列表头 2 : 列表项 21 : 列表项 22 会生成下面的 HTML 代码
< dl > < dt > 列表头1 </ dt > < dd > 列表项11 </ dd > < dd > 列表项12 </ dd > < dt > 列表头2 </ dt > < dd > 列表项21 </ dd > < dd > 列表项22 </ dd > </ dl > 渲染效果类似下面这样
列表头1
列表项11
列表项12
列表头2
列表项21
列表项22
来自 https://iamhefang.cn/tutorials/markdown/%E5%88%97%E8%A1%A8
6.1 语法 Markdown 可以使用大于号 > 和空格生成引用（<blockquote>...</blockquote>）
下面的代码
会生成下面效果
这是一个引用段落
在Markdown编辑器中打开
6.2 引用多个段落 引用可以包含多个段落，引用内段落和普通段落一样，不过在空行前面也要加上小于号。
下面的代码
会生成下面效果
这是一个引用段落
这是另一个引用段落
在Markdown编辑器中打开
6.3 引用嵌套 在一个引用块里面还可以再引用其他段落。在段落的前面加多个小于事情可以大致多重嵌套的目的。
下面的代码
会生成下面效果
这是一个引用段落
这是另一个引用段落
在Markdown编辑器中打开
6.4 引用其他元素 引用不只可以有段落，还可以存在列表、粗斜体等。
下面的代码
> 这是一个 * 引用 * ** 段落 ** > > 1. 有序列表项 1 > 1. 有序列表项 2 > 1. 有序列表项 3 > > - 无序列表项 1 > - 无序列表项 2 > - 无序列表项 3 会生成下面效果
这是一个引用 段落
有序列表项 1
有序列表项 2
有序列表项 3
在Markdown编辑器中打开
来自 https://iamhefang.cn/tutorials/markdown/%E5%BC%95%E7%94%A8
7.1 行内代码 使用一对反引号(`)来创建行内代码。如果在行内代码中需要包含反引号本身，可以使用两个反引号对加前后空格来创建。
Markdown HTML 预览 这是行内`代码`<p>这是行内<code>代码</code></p>这是行内代码 `` ` ``<code>`</code>`
在Markdown编辑器中打开 7.2 代码块 将文本的每一行缩进至少四个空格或一个制表符。这样这些文本会变成代码块。
下面的代码
< html > < head > </ head > </ html > 会生成下面的效果
<html> <head></head> </html> 在Markdown编辑器中打开 7.3 围栏式代码块 在很多 Markdown 解析器里都支持使用三个反引号(`)或三个波浪号(~)来定义围栏式代码块。同时这种代码块配合插件还可以做到代码高亮、行号等高级功能。
如果在代码块中也存在三个反引号或波浪号，可以在外层使用 4 个。
下面的代码有高亮显示效果，这并不是 Markdown 本身的功能，而是通过第三方插件 Prism.js 做到的。一般在开始的三个反引号或波浪号的后面加代码语言可以指定代码的语言从而可以使用第三方插件做到高亮效果。
下面的代码
``` javascript const a = 1; const b = 2; function add(num1, num2) { return num1 + num2; } console.log(add(a, b)); ``` 会生成下面的效果
const a = 1 ; const b = 2 ; function add ( num1 , num2 ) { return num1 + num2 ; } console . log ( add ( a , b ) ) ; 在Markdown编辑器中打开
来自 https://iamhefang.cn/tutorials/markdown/%E4%BB%A3%E7%A0%81%E5%9D%97
语法 一行只存在连续三个或以上星号(*)、减号(-)或下划线(_)会被生成分隔线(<hr/>)
以下代码
会生成以下效果
注意 在使用分隔线时一行在分隔线的上下各留一行空白行。
虽然星号、减号和下划线都能构成分隔符，但一般使用减号，输入更方便。
在Markdown编辑器中打开
来自 https://iamhefang.cn/tutorials/markdown/%E5%88%86%E9%9A%94%E7%BA%BF
在 Markdown 里可以创建超链接，以链接到其他 Markdown 页面或网站。
9.1 使用超链接 9.1.1 链接到网站 [ 何方的个人小站 ]( https://iamhefang.cn/ ) 何方的个人小站
9.1.2 链接到其他 Markdown 页面 Marakdown 标题
9.1.3 无标签链接 https://iamhefang.cn/
9.1.4 无标签邮箱链接 hefang@xxx.xxx
9.1.5 添加 title [ Marakdown 标题 ]( ./标题 "点击跳转到标题页" ) Marakdown 标题
9.2 自动超链接 有些 Markdown 解析器还可以自动解析代码中的链接，并生成无标签链接。
比如 https://iamhefang.cn/ ，并没有添加任何的超链接语法，但是被自动转换成了 a 标签。
如果不希望自动转换，可以把链接写成行内代码，这样就不会自动转换了。比如: https://iamhefang.cn/
在Markdown编辑器中打开
9.3 和其他元素配合 超链接还可以和粗体、斜体、代码等其他元素一块使用
1. 这是一个 [ ** 粗体链接 ** ]( ./粗体斜体删除线 ) 1. 这是一个 [ _ 斜体链接 _ ]( ./粗体斜体删除线 ) 1. 这是一个 [ ** _ 粗斜体链接 _ ** ]( ./粗体斜体删除线 ) 1. 这是一个 [ `在代码里面的链接` ]( ./代码块 ) 这是一个粗体链接
这是一个斜体链接
这是一个粗斜体链接
这是一个在代码里面的链接
上面 4 个都是在列表里面的链接，这个是在引用里面的链接
在Markdown编辑器中打开
来自 https://iamhefang.cn/tutorials/markdown/%E8%B6%85%E9%93%BE%E6%8E%A5
markdown里面可以添加图片
10.1 添加图片 下面的代码，在上一节生成超链接的代码前面添加一个感叹号(!)，同时把链接换成图片地址。
! [ 这是一个图片 ]( /images/tutorials/markdown/工具页截图-dark.png ) 会生成下面的效果
在Markdown编辑器中打开 10.2 带链接的图片 下面的代码，把生成图片的代码放到了超链接的名称里面，超链接的用法见上一节
[  ](/tools/) 会生成下面的效果，点击下面的图片会跳转到工具页
在Markdown编辑器中打开 10.3 带title的图片 图片可以添加title，只需要在图片地址的后面添加title内容即可，下面的代码：
! [ 这是一个图片 ]( /images/tutorials/markdown/工具页截图-dark.png "这是工具页的截图" ) 会生成下面的效果
在Markdown编辑器中打开
来自 https://iamhefang.cn/tutorials/markdown/%E5%9B%BE%E7%89%87
在 Markdown 里面是可以直接内嵌 HTML 语法的。扩展的 MarkdownX 语法中可以使用 React 的 JSX 语法。
12.1 在 Markdown 中内嵌 HTML 下面的代码是在 Markdown 里面使用 html 添加了一个有用户名和密码输入框的表单
** 请在下面表单中输入您的用户名和密码 ** < form > < div > < label > 用户名 </ label > < input type = " text " placeholder = " 请输入用户名 " /> </ div > < div > < label > 密码 </ label > < input type = " password " placeholder = " 请输入密码 " /> </ div > </ form > 会生成下面效果
请在下面表单中输入您的用户名和密码
在Markdown编辑器中打开 12.2 在 MarkdownX 中嵌入 React 在 MarkdownX 中嵌入 React 特性为扩展特性，大多数Markdown解析器都不支持。据我所知，只有Docusaurus ，也就是本站所使用的框架支持。
下面的代码是在正则表达式教程里面常用的正则表达式输入框。
下面的第一行import代码必须放到整个文档内容的最前面
import RegexWidget from "../components/RegexWidget"; < RegexWidget /> 下面是生成的正则表达式输入框，可以直接输入。
来自 https://iamhefang.cn/tutorials/markdown/%E5%86%85%E5%B5%8CHTML%E5%92%8CReact
在Markdown中可以使用表格，同时可以设置每列的对齐方式。
13.1 使用表格 表格使用竖线(|)区分每一列，在表格头和表格体之间第列使用至少三个减号(-)来做为分隔。
下面的代码
| --- | --- | --- | | 第一行第一列 | 第一行第二列 | 第一行第三列 | | 第二行第一列 | 第二行第二列 | 第二行第三列 | 会生成下面效果
第一列 第二列 第三列 第一行第一列 第一行第二列 第一行第三列 第二行第一列 第二行第二列 第二行第三列
在Markdown编辑器中打开 13.2 设置表格对齐方式 下列代码，在第二行的每一列都添加了冒号(:)，左侧添加一个冒号表示该列左对齐，右侧添加一个冒号表示该列右对齐，左右各添加一个冒号表示该列居中对齐。
| :--- | :---: | ---: | | 这一列是左对齐的 | 这一列是居中对齐的 | 这一列是右对齐的 | 会生成下面效果
第一列 第二列 第三列 这一列是左对齐的 这一列是居中对齐的 这一列是右对齐的
在Markdown编辑器中打开 13.3 在表格中使用其他元素 在表格中可以使用斜体单行元素，比如粗体斜体、行内代码、超链接、图片、Emoji表情、HTML等。
| :---: | :---: | | ** 粗体 ** | _ 斜体 _ | | `行内代码` | [ 超链接 ]( ./超链接 ) | | :cat: | <span style={{color:"red"}}>带颜色的字 </ span > | 在Markdown编辑器中打开
来自 https://iamhefang.cn/tutorials/markdown/%E8%A1%A8%E6%A0%BC
脚注是扩展特性，并非所有 Markdown 解析器都支持。
14.1 做为说明/文献 脚注类似于参考文献或补充说明，统一出现的文档的最后，可在文中任意位置引用。
脚注的定义语法为： [^名称]: 内容
脚注的引用语法为：[^名称]。比如上面的注就是引用的脚注，点击可以跳转到下面的脚注内容。
14.1.1 行内脚注 行内脚注是可选功能，并非所有支持脚注的解析器都支持行内脚注。
行内脚注 ^[行内脚注] 不需要显式声明，只要在需要脚注的地方直接使用就可以，解析器会把内容提取出来放到文末。
14.2 做为常量 脚注还可以做为类似编程中常量的用法。比如下面的 Markdown 代码里面有一张图片，这张图片的地址非常长，如果直接放到代码里面会影响可读性。我们可以把图片地址放到脚注里面，再在需要的地方引用。
! [ LOGO ]( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAUQSURBVFhH7VfrK99tGH/+ATMjEznGTJbzqRbWTGMlbNoL4QWieCfe2JLSSN5IxF7IuWgph0QOWwtNJCK0zXEUmYYhZ9fT56r72/3jZj/2ePI87VOf3Pd1X7/r/nzvw3Xd/qIbjj8Cfxc6Ak9OTm4EZfz/BB4cHFBXVxdtbGwox/8Jyri0wIWFBTI2NiZbW1tKSUmh6upq6uvrU/pelTKutMVTU1NkYmJCBgYGTAju6elR+l6FMq4ksKWlhW7fvq0JBB8/fqyN7+/v86qurq7S8fGxzm/1oYxLC/zy5QuZmppqwp49e0Zv3ryhlZUVmp2dpezsbHJ2duYxfMT9+/d5TBXrPMq4lMC1tTVtcrC8vJzty8vLlJaWprPtoJeXF1VWVtLR0dGZWBdRht4CNzc3yc/Pjye+c+cOdXR0sLCXL1/qiAKtra2ppqZGGefTp0/U29urHBOUoZfAvb09CgwM5MktLS3p8+fPvDLoW1lZUWlpKT1//lwTGBkZeSZGfX09+fr6aj4ZGRnnpioZegmMiorSAre3t9OrV6+4nZ6eTj9//qSEhAS6e/cuubm5UXBwMJ9R8VvkTLHy+Jh79+5psZaWlnTmEZTxS4FxcXEcDAe+qKiIMjMzuV9SUsLjjx49opCQEHrx4gVVVFRQbW0tj/f391Nqaqom5vXr1zQ/P0/29vbcT0pKOjOXoIxzBf748YO3SkwA+vj48N+ysjL2CQsL476joyOZmZnxlg0NDen85smTJzQ6Osr+0dHRbHNxcbmwEslQCsSFwA2UJxJf7uTkxD6tra3cx4VBKkH73bt3lJiYyG0LCwuqq6vTYqLiwI4tRjoSdhVlKAXOzc1xMMGIiAjeMrSxWkgb4sBjS/Pz83X8weTkZC0ecieqDdLQ5OSkZj+PMpQCx8bGdCabmJig4uJibj948IBmZmb4TOJiwN/f35/HbGxsKDc3l9vYTowNDAzwqsPW3NyszXERZSgFjoyMcECwoKCAbbid6GM7h4eHuf3w4UN6//695osthi/aMTExXLNv3brFfZHU9aEMpcDp6WmdoOIFA5udnR1vcVBQEJmbm/OqwQ4iAR8eHnIbqenr168sEOmlqqqK3r59ywn848eP/JFXTjN48yGY6CN9CBE4g7AhH4oHA/IhxGJCCMTHeHt7s5+Dg4P2WxUDAgL48SHmAmUoBZ6myIUgziBs29vbfAYNDQ25RiO94OWys7PDKQcVB/2cnBxeZfRxg/GO9PT05A9ASRRx8Xsxn4xfCsQkrq6uWiB3d3e2yzcdtra2Nu1pBUGoJltbW9yHaFQc7Mzu7q4WGxS5FJdQ2GTotYJZWVmaGFwM2FCfsbUiP4IeHh7U2NjINmwzVvZ0LJmo6eIF1NDQoNll6CUQlwQJGYHw/pPHUBHwAeK2ChoZGfEqy74ysZqiMuGofP/+XRuToZdAEC9mBMOqqcY/fPhw5t+Ab9++KX3B2NhYzTcvL09nTIbeAvE4QDCkCNU42NnZqa00ziBKpsoPr24hDrcYqymPy9BbIA43KopqTCaqBcSFh4crx/EOFOKePn2qPKcy9BZ4GSIfrq+vn7HHx8dr4s47KqCMaxF4msiZoaGhLAw3HeVR5Sco49oFjo+PczVB1cGr5/R5U1HGtQpEOUQKwctmcXFR6aOijGsRiNd4YWEh39Du7m6lz0WUcS0CBwcHqamp6dL/DwvK+FcuyWUp478l8Cbij8DfA9Hf+m22sMV0vbcAAAAASUVORK5CYII= )
如果我们把图片地址放到脚注里面，代码就会简洁的多。常量脚注的声明方式和引用脚注相似：[名称]: 内容
! [ LOGO ][ logo ] [ logo ] : data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAUQSURBVFhH7VfrK99tGH/+ATMjEznGTJbzqRbWTGMlbNoL4QWieCfe2JLSSN5IxF7IuWgph0QOWwtNJCK0zXEUmYYhZ9fT56r72/3jZj/2ePI87VOf3Pd1X7/r/nzvw3Xd/qIbjj8Cfxc6Ak9OTm4EZfz/BB4cHFBXVxdtbGwox/8Jyri0wIWFBTI2NiZbW1tKSUmh6upq6uvrU/pelTKutMVTU1NkYmJCBgYGTAju6elR+l6FMq4ksKWlhW7fvq0JBB8/fqyN7+/v86qurq7S8fGxzm/1oYxLC/zy5QuZmppqwp49e0Zv3ryhlZUVmp2dpezsbHJ2duYxfMT9+/d5TBXrPMq4lMC1tTVtcrC8vJzty8vLlJaWprPtoJeXF1VWVtLR0dGZWBdRht4CNzc3yc/Pjye+c+cOdXR0sLCXL1/qiAKtra2ppqZGGefTp0/U29urHBOUoZfAvb09CgwM5MktLS3p8+fPvDLoW1lZUWlpKT1//lwTGBkZeSZGfX09+fr6aj4ZGRnnpioZegmMiorSAre3t9OrV6+4nZ6eTj9//qSEhAS6e/cuubm5UXBwMJ9R8VvkTLHy+Jh79+5psZaWlnTmEZTxS4FxcXEcDAe+qKiIMjMzuV9SUsLjjx49opCQEHrx4gVVVFRQbW0tj/f391Nqaqom5vXr1zQ/P0/29vbcT0pKOjOXoIxzBf748YO3SkwA+vj48N+ysjL2CQsL476joyOZmZnxlg0NDen85smTJzQ6Osr+0dHRbHNxcbmwEslQCsSFwA2UJxJf7uTkxD6tra3cx4VBKkH73bt3lJiYyG0LCwuqq6vTYqLiwI4tRjoSdhVlKAXOzc1xMMGIiAjeMrSxWkgb4sBjS/Pz83X8weTkZC0ecieqDdLQ5OSkZj+PMpQCx8bGdCabmJig4uJibj948IBmZmb4TOJiwN/f35/HbGxsKDc3l9vYTowNDAzwqsPW3NyszXERZSgFjoyMcECwoKCAbbid6GM7h4eHuf3w4UN6//695osthi/aMTExXLNv3brFfZHU9aEMpcDp6WmdoOIFA5udnR1vcVBQEJmbm/OqwQ4iAR8eHnIbqenr168sEOmlqqqK3r59ywn848eP/JFXTjN48yGY6CN9CBE4g7AhH4oHA/IhxGJCCMTHeHt7s5+Dg4P2WxUDAgL48SHmAmUoBZ6myIUgziBs29vbfAYNDQ25RiO94OWys7PDKQcVB/2cnBxeZfRxg/GO9PT05A9ASRRx8Xsxn4xfCsQkrq6uWiB3d3e2yzcdtra2Nu1pBUGoJltbW9yHaFQc7Mzu7q4WGxS5FJdQ2GTotYJZWVmaGFwM2FCfsbUiP4IeHh7U2NjINmwzVvZ0LJmo6eIF1NDQoNll6CUQlwQJGYHw/pPHUBHwAeK2ChoZGfEqy74ysZqiMuGofP/+XRuToZdAEC9mBMOqqcY/fPhw5t+Ab9++KX3B2NhYzTcvL09nTIbeAvE4QDCkCNU42NnZqa00ziBKpsoPr24hDrcYqymPy9BbIA43KopqTCaqBcSFh4crx/EOFOKePn2qPKcy9BZ4GSIfrq+vn7HHx8dr4s47KqCMaxF4msiZoaGhLAw3HeVR5Sco49oFjo+PczVB1cGr5/R5U1HGtQpEOUQKwctmcXFR6aOijGsRiNd4YWEh39Du7m6lz0WUcS0CBwcHqamp6dL/DwvK+FcuyWUp478l8Cbij8DfA9Hf+m22sMV0vbcAAAAASUVORK5CYII=
去练习
来自 https://iamhefang.cn/tutorials/markdown/%E8%84%9A%E6%B3%A8
Markdown 本身并不支持公式，但 Markdown 在技术文章、文档、博客领域使用较多，所以非常多的 Markdown 解析器是支持公式扩展的。在支持公式扩展的 Markdown 解析器中，我们可以使用 Katex 语法在 Markdown 中使用公式。
不同的公式渲染器的语法定义也不同，一般分两种，行内公式 和块公式 。行内公式一般前后各使用一个 $ 包裹，块公式一般前后各使用两个 $ 包裹。
15.1 行内公式 行内公式前后各使用一个 $ 包裹，渲染结果和行内代码类似，在行内显示，不换行。
这是一个行内公式: $a^2 = b^2 + c^2$ 这是一个行内公式: a 2 = b 2 +c 2
15.2 块公式 块公式前后各使用两个 $ 包裹，渲染结果和代码块一样，独占一行。
$$
f(x) = \int_{-\infty}^\infty
\hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi
$$
来自 https://iamhefang.cn/tutorials/markdown/%E5%85%AC%E5%BC%8F
Markdown 本身并不支持图表，但 Markdown 在技术文章、文档、博客领域使用较多，所以非常多的 Markdown 解析器是支持图表扩展的。在支持图表扩展的 Markdown 解析器中，我们可以使用解析支持的图表语法来渲染图表。
由于图表不是 Markdown 标准，不同的 Markdown 编辑器支持的图表类型也不同。 我们的在线编辑器 使用的是 Mermaid 。图表的使用方法和围栏式代码块一样，但代码语言固定为 mermaid，Markdown 解析器会把代码为 mermaid 的代码块解析并渲染为图表。
16.1 流程图 在Markdown编辑器中打开 ``` mermaid flowchart LR A[直角矩形] -->|链接文本| B(圆角矩形) B --> C{选择} C -->|一| D[结果一] C -->|二| E[结果二] ``` 16.2 时序图 在Markdown编辑器中打开 ``` mermaid sequenceDiagram autonumber par Action 1 Alice->>John: Hello John, how are you? and Action 2 Alice->>Bob: Hello Bob, how are you? end Alice->>+John: Hello John, how are you? Alice->>+John: John, can you hear me? John-->>-Alice: Hi Alice, I can hear you! Note right of John: John is perceptive John-->>-Alice: I feel great! loop Every minute John-->Alice: Great! end ``` Alice John Bob par [Action 1] [Action 2] John is perceptive loop [Every minute] Hello John, how are you? 1 Hello Bob, how are you? 2 Hello John, how are you? 3 John, can you hear me? 4 Hi Alice, I can hear you! 5 I feel great! 6 Great! 7 Alice John Bob 16.3 类图 在Markdown编辑器中打开 ``` mermaid classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } ``` Animal
+int age
+String gender
+isMammal()
+mate()
Duck
+String beakColor
+swim()
+quack()
Fish
-int sizeInFeet
-canEat()
Zebra
+bool is_wild
+run()
16.4 状态图 在Markdown编辑器中打开 ``` mermaid stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*] ``` 16.5 实体关系图 在Markdown编辑器中打开 ``` mermaid erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses ``` CUSTOMER ORDER LINE-ITEM DELIVERY-ADDRESS places contains uses 16.6 用户旅行图 在Markdown编辑器中打开 ``` mermaid journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 5: Me ``` 16.7 甘特图 在Markdown编辑器中打开 ``` mermaid gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid excludes weekends %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".) section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d Functionality added :milestone, 2014-01-25, 0d section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page :20h Add another diagram to demo page :48h ``` 2014-01-07 2014-01-09 2014-01-11 2014-01-13 2014-01-15 2014-01-17 2014-01-19 2014-01-21 2014-01-23 2014-01-25 2014-01-27 Completed task Completed task in the critical line Implement parser and jison Describe gantt syntax Active task Create tests for parser Add gantt diagram to demo page Add another diagram to demo page Future task Future task in critical line Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page Future task2 Create tests for renderer Add to mermaid Functionality added A section Critical tasks Documentation Last section Adding GANTT diagram functionality to mermaid 16.8 需求图 在Markdown编辑器中打开 ``` mermaid requirementDiagram requirement test_req { id: 1 text: the test text. risk: high verifymethod: test } element test_entity { type: simulation } test_entity - satisfies -> test_req ``` <<Requirement>> test_req Id: 1 Text: the test text. Risk: High Verification: Test <<Element>> test_entity Type: simulation Doc Ref: None <<satisfies>> 16.9 Git 记录图 在Markdown编辑器中打开 ``` mermaid gitGraph commit commit branch develop checkout develop commit commit checkout main merge develop commit commit ``` main develop 0-f182a38 1-62714c4 2-23082e3 3-584df03 5-e4a3937 6-19bcf6f 16.10 C4 模型图 在Markdown编辑器中打开 ``` mermaid C4Context title System Context diagram for Internet Banking System Enterprise_Boundary(b0, "BankBoundary0") { Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.") Person(customerB, "Banking Customer B") Person_Ext(customerC, "Banking Customer C", "desc") Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.") System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") Enterprise_Boundary(b1, "BankBoundary") { SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") System_Boundary(b2, "BankBoundary2") { System(SystemA, "Banking System A") System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.") } System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.") Boundary(b3, "BankBoundary3", "boundary") { SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.") SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.") } } } BiRel(customerA, SystemAA, "Uses") BiRel(SystemAA, SystemE, "Uses") Rel(SystemAA, SystemC, "Sends e-mails", "SMTP") Rel(SystemC, customerA, "Sends e-mails to") UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red") UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5") UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10") UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50") UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20") UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1") ``` <<person>> Banking Customer A A customer of the bank, with personal bank accounts. <<person>> Banking Customer B <<external_person>> Banking Customer C desc <<person>> Banking Customer D A customer of the bank, with personal bank accounts. <<system>> Internet Banking System Allows customers to view information about their bank accounts, and make payments. <<external_system_db>> Mainframe Banking System Stores all of the core banking information about customers, accounts, transactions, etc. <<external_system>> E-mail system The internal Microsoft Exchange e-mail system. <<system_db>> Banking System D Database A system of the bank, with personal bank accounts. <<system>> Banking System A <<system>> Banking System B A system of the bank, with personal bank accounts. next line. BankBoundary2 [ENTERPRISE] <<system_queue>> Banking System F Queue A system of the bank. <<external_system_queue>> Banking System G Queue A system of the bank, with personal bank accounts. BankBoundary3 [boundary] BankBoundary [ENTERPRISE] BankBoundary0 [ENTERPRISE] Uses Uses Sends e-mails [SMTP] Sends e-mails to System Context diagram for Internet Banking System 本文只学习如何在 Markdown 中使用图表，Mermaid 语法不在本文范围内。若要学习 Mermaid 具体语法请移步 Mermaid 。
来自 https://iamhefang.cn/tutorials/markdown/%E5%9B%BE%E8%A1%A8
Markdown 本身是不支持注释的，但大部分的 Markdown 编辑器或解析器是支持 HTML 的，我们可以使用 HTML 的注释来做到 Markdown 注释的效果。
在Markdown编辑器中打开
来自 https://iamhefang.cn/tutorials/markdown/%E6%B3%A8%E9%87%8A
来自 https://www.bilibili.com/video/BV1hG4y1H7iZ/?spm_id_from=333.337.search-card.all.click&vd_source=346847773d1f74962a4daab9ddf7f228
来自 https://iamhefang.cn/tutorials/markdown/
