文章目录
什么是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
- 无序列表项
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 行内脚注
行内脚注1不需要显式声明,只要在需要脚注的地方直接使用就可以,解析器会把内容提取出来放到文末。
14.2 作为常量
如果我们把图片地址放到脚注里面,代码就会简洁的多。常量脚注的声明方式和引用脚注相似:【名称】:内容
![LOGO][logo]
[logo]:data:image/png;base64,iVBORwOKGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSROIArs4c6QAAA
15.公式
Markdown本身并不支持公式,但Markdown在技术文章、文档、博客领域使用较多,所以非常多的Markdown解析器是支持公式扩展的。在支持公式扩展的Markdown解析器中,我们可以使用Katex语法在Markdown中使用公式。
不同的公式渲染器的语法定义也不同,一般分两种,行内公式和块公式。行内公式一般前后各使用一个
包裹,块公式一般前后各使用两个
包裹,块公式一般前后各使用两个
包裹,块公式一般前后各使用两个包裹。
15.1 行内公式
行内公式前后各使用一个
包裹,谊染结果和行内代码类似,在行内显示,不换行。这是
−
个行内公式:
包裹,谊染结果和行内代码类似,在行内显示,不换行。 这是-个行内公式:
包裹,谊染结果和行内代码类似,在行内显示,不换行。这是−个行内公式:a2=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 ) = ∫ − ∞ ∞ f ^ ( ξ ) e 2 π i ξ x d ξ f(x) = \int_{-\infty}^\infty \hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi f(x)=∫−∞∞f^(ξ)e2πiξxdξ
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.代码框:
文字
文字
行脚注 ↩︎