【Markdown】使用简记

什么是Markdown

Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯(英语:John Gruber)。 它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML(或者HTML)文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。

1.标题

1.1 常用语法

Markdown的标题和HTML的标题一致，分为6级。分别在一行的开头放1到6个#加空格再加标题内容。

1.2 可选语法

标题内容的后而如果也存在空格和#，也可以构成标题，且标题的级别以前面#的数量为准。

除了前面加#外，标题1和标题2也可以用下面加横线的形式。标题下面加等号三会生成标题1，加减号一会生成标题2。等号和减号的数量一般不限制，可以有一个或多个。

1.3 自定义标题ID

###标题3{#head3}
###标题4{#head4}
#####标题5{#head5}
######标题6{#head6}

2.段落

在Markdown里面直接顶行写一些文本就会生成段落，各个段落之闻以空行分割。

3.换行

在一行文本后面添加两个以上空格，引擎会生成换行符
，下表中这是一段文本1后面有两个空格。

4.粗体斜体删除线

4.1 粗体

在需要加粗的文本前后添加两个星号(*)或下划线(_)可以对文本加粗。

4.2 斜体

在需要加斜的文本前后添加一个星号(*)或下划线(_)可以倾斜文本

4.3 粗斜体

在需要加粗的文本前后添加三个星号(*)或下划线(_)可以颜斜并加粗文本。

4.4 删除线

在需要加粗的文本前后添加两个波浪号(~)

5.列表

5.1 有序列表

在文本前面添加数字加点加空格可以构成有序列表。最终生成的列表前面的偏号和前面的数字没有绝对关系，总是从第一个数字开始依次增加。

5.2 无序列表

无序列表可以在文本前面加减号(-)、屋号(*)、加号(+)实现。

5.3 列表嵌套

有序列表、无序列表都是可以嵌套的。在列表项前面添加两个以上空格或制表符可以把该行变成子列表。

5.4 任务列表

有序列表和无序列表都可以做为任务列表使用，任务列表会在每项前面添加一个复选框

• 已选
• 未选

6.引用

6.1 语法

Markdown可以使用大于号>和空格生成引用(<blockquote>...</blockquote>)

引用段落

6.2 引用多个段落

引用可以包含多个段落，引用内段落和普通段落一样，不过在空行前面也要加上小于号。

引用段落

引用段落

6.3 引用其他元素

一个 引用 段落

1. 有序列表项 1

• 无序列表项

7.代码块

7.1 行内代码块

使用一对反引号(`)来创建行内代码。如果在行内代码中需要包含反引号本身，可以使用两个反引号对加前后空格来创建。

行内代码

7.2 代码块

将文本的每一行缩进至少四个空格或一个制表符。这样这些文本会变成代码块。

7.3 围栏式代码块

在很多Markdown解析器里都支持使用三个反引号(`)或三个波浪号(~)来定义围栏式代码块。同时这种代码块配合插件还可以做到代码高亮、行号等高级功能。

8.分隔线

语法

一行只存在连续三个或以上星号(*)、减号（一）或下划线()会被生成分隔线(<hr/>)

---

9.超链接

9.1 使用超链接

9.1.1 链接到网站

[Markdown](http://xxx.com)

9.1.2 链接到其他Markdown页面

[Marakdown标题](./标题)

9.1.3 无标签链接

<http://>

9.1.4 无标签邮箱链接

<xxx@xxx.xxx>

9.1.5 添加title

[Marakdown标题](./标题"点击跳转到标题页")

9.2 自动超链接

有些Markdowr解析器还可以自动解析代码中的链接，并生成无标签链接。
比如https://xxx.xxx/,并没有添加任何的超链接语法，但是被自动转换成了a标签。
如果不希望自动转换，可以把链接写成行内代码，这样就不会自动转换了。比如：https://xxx.xx/

9.3 和其他元素配合

1,这是一个[**粗体链接**]（./粗体斜体删除线)
1,这是一个[斜体链接](，/粗体斜体删除线)
1,这是一个[**粗斜体链接_**](，/粗体斜体删除线)
1.这是一个[`在代码里面的链接`](，/代码块)

10.图片

10.1 添加图片

下面的代码，在上一节生成超链接的代码前面添加一个感叹(!)，同时把链接换成图片地址。

！[这是一个图片](/images/tutorials./markdown/工具页哉图-dark.png)

10.2 带链接的图片

[![这是一个图片](/images/tutorials/ma rkdown,/工具页截图-dark.png)](/tools./)

10.3 带title的图片

![这是一个图片](/images/tuforials,/markdown/工具页截图-dark.png"这是工具页的截图")

11.Emoji表情

在Markdown里使用Emoji表情有两种方法，一种是直接输入Emoji表情，另一种是使用Emoji表情短码(emoji
shartcodes).
Emoji表情短码放到两个冒号(：)之间，比如：:joy: 😂

12.内嵌html

在Markdown里面是可以直接内嵌HTML语法的。扩展的MarkdownX语法中可以使用React的JSX语法。

12.1 在Markdown中内嵌HTML

**请在下面表单中输入您的用户名和密码**
<form>
<div>
<label>用户名</label><input type="text"placeholder:="请输入用户名"/>
</div>
<div>
<label:>密码</label><input type="password'"placeholder="请输入密码"/>
</div>
</form>

请在下面表单中输入您的用户名和密码

用户名

13.表格

13.1 使用表格

表格使用竖线(|)区分每一列，在表格头和表格体之间第列使用至少三个减号（一）来做为分隔。

|第一列|第二列|第三列
|-|--|-|
第一行第一列|第一行第二列|第一行第三列|
第二行第一列|第二行第二列|第二行第三列|

第一列	第二列	第三列
第一行第一列	第一行第二列	第一行第三列
第二行第一列	第二行第二列	第二行第三列

13.2 设置表格对齐方式

下列代码，在第二行的每一列都添加了冒号(😃，左侧添加一个冒号表示该列左对齐，右侧添加一个冒号表示该列右对齐，左右各添加一个冒号表示该列居中对齐。

第一列|第二列|第三列|
|:---|:--:|---:|
|这一列是左对齐的|这一列是居中对齐的|这一列是右对齐的|

第一列	第二列	第三列
这一列是左对齐的	这一列是居中对齐的	这一列是右对齐的

13.3 在表格中使用其他元素

在表格中可以使用斜体单行元素，比如粗体斜体、行内代码、超链接、图片、Emoji表情、HTML等

|第一列|第二列
|:--:|:--:|
|**粗体**|_斜体_|
|`行内代码`|[超链接](./超链接)|
|:cat:|<span style:={{color:"red"}}>带颜色的字</span>|

第一列	第二列
粗体	斜体
行内代码	超链接
🐱	<span style:={{color:“red”}}>带颜色的字

14.脚注

脚注类似于参考文献或补充说明，统一出现的文档的最后，可在文中任意位置引用。

脚注的定义语法为：
[^名称]：内容
脚注的引用语法为：
[^名称]。比如上面的注就是引用的脚注，点击可以跳转到下面的脚注内容。

脚注的定义语法为：
[^名称]：内容
脚注的引用语法为：
[^名称]。比如上面的注就是引用的脚注，点击可以跳转到下面的脚注内容。

14.1 行内脚注

行内脚注¹不需要显式声明，只要在需要脚注的地方直接使用就可以，解析器会把内容提取出来放到文末。

14.2 作为常量

如果我们把图片地址放到脚注里面，代码就会简洁的多。常量脚注的声明方式和引用脚注相似：【名称】：内容
![LOGO][logo]

[logo]:data:image/png;base64,iVBORwOKGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSROIArs4c6QAAA

15.公式

Markdown本身并不支持公式，但Markdown在技术文章、文档、博客领域使用较多，所以非常多的Markdown解析器是支持公式扩展的。在支持公式扩展的Markdown解析器中，我们可以使用Katex语法在Markdown中使用公式。
不同的公式渲染器的语法定义也不同，一般分两种，行内公式和块公式。行内公式一般前后各使用一个$包裹，块公式一般前后各使用两个$包裹。

15.1 行内公式

行内公式前后各使用一个$包裹，谊染结果和行内代码类似，在行内显示，不换行。这是-个行内公式：$a^2=b2+c^2$
这是一个行内公式：a2=b2+c2

15.2 块公式

块公式前后各使用两个$包裹，谊染结果和代码块一样，独占一行。

$$
f(x) = \int_{-\infty}^\infty
    \hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi
$$

$$f(x)={\int }_{-\infty }^{\infty }\hat{f}(\xi )e^{2\pi i\xi x}d\xi$$

16.图表

Markdown本身并不支持图表，但Markdown在技术文章、文档、博客领域使用较多，所以非常多的Markdown解析器是支持图表扩展的。在支持图表扩展的Markdown解析器中，我们可以使用解析支持的图表语法来淀染图表。
由于图表不是Markdown标准，不同的Markdown编辑器支持的图表类型也不同。我们的在线编辑器使用的是Mermaid。
图表的使用方法和围栏式代码块一样，但代码语言周定为mermaid,，Markdown解析器会把代码为mermaid的代码块解析并渲染为图表。

```mermaid
flowchart LR
A[直角矩形] -->|链接文本| B(圆角矩形)
B --> C{选择}
C -->|一| D[结果一]
C -->|二| E[结果二]
```

17.注释

<!-- 注释内容 -->
<?注释内容>

18.补充

1.高亮: ==文字==
2.标题: # 文字 ## 文字 ### 文字 最多支持6级的标题
3.加粗: **文字**
4.斜体: *文字*
5.上标: ^文字^
6.下标: ~文字~
7.列表: +文字   在+号前加两个空格可以实现下一级列表
8.表格: 
|文字|文字|文字|
|---|---|---|---|
|文字|文字|文字|
9.引用: >文字 >>文字 >>>文字    打几个就可以实现几级的引用
10.代码框:  '文字'    ''' 文字'''

1.高亮:
文字

2.标题:

文字

文字

文字

最多支持6级的标题

3.加粗:
文字

4.斜体:
文字

5.上标:
^文字

6.下标:
_文字

7.列表:

• 文字
  在+号前加两个空格可以实现下一级列表

8.表格:

文字	文字	文字
文字	文字	文字

9.引用:

文字

文字

文字
打几个就可以实现几级的引用

10.代码框:
文字

文字

---

1. 行脚注 ↩︎