一、简单认识Markdown
Markdown
是一种轻量级标记语言,创始人为约翰·格鲁伯(John Gruber)。
Markdown
允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的HTML文档。
Markdown
编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。
Markdown
编写的文档后缀为 .md, .markdown。
二、Markdown基础语法
2.1标题
使用#号标记,可以表示H1-H6,随#个数的增加标题逐渐变小;建议在#号后加一个 空格
,这是最标准的 Markdown 语法。
代码如下:
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
效果如下:
2.2文本
2.3列表
Markdown的列表有序列表
、无序列表
以及特殊的任务列表
。
行尾回车换行后会自动接续列表,再次按Tab会标记段落并更换列表符/再次按回车会清除列表符以作换行。
2.3.1有序列表
有序列表即有顺序的列表,使用 数字、英文句点
后面加一个 空格
作为列表标记。
注:原始代码中的数字编号不影响最终输出的HTML结果
1. 文本1
2. 文本2
9. 文本3
输出效果为:
- 文本1
- 文本2
- 文本3
列表可嵌套,嵌套可使列表项包含多个段落。列表项中的 每个后续段落必须缩进 4个空格
或 1个制表符
,代码块需要缩进 8个空格
或 2个制表符
:
1. 列表1
列表1的 段落
> 列表1的 引用
列表1的 代码块
1. 列表2
输出效果:
列表1 列表1的 段落
列表1的 引用 列表1的 代码块
列表2
注:当需要使用“.”作为文本内容时,可能会意外地触发一个有序列表,为了避免这种情况,可以在“.”前加上反斜线 \
用于转义
2.3.2无序列表
即列表没有序号,使用 减号 -
、星号 *
或 加号 +
作为列表标记,符号后须加上 空格
。
- 1级列表
* 2级列表
* 2级列表
+ 3级列表
+ 3级列表
- 1级列表
- 1级列表
输出效果:
- 1级列表
- 2级列表
- 2级列表
- 3级列表
- 3级列表
- 1级列表
- 1级列表
2.3.3任务列表
在列表项目前面加 1个减号 -
及 空格
、并紧跟 方括号 [ ]
作为待办任务标记,使用 [x]
将任务标记为已完成。
- [ ] 任务列表(待办任务)
- [x] 任务列表(完成任务)
输出效果:
- 任务列表(待办任务)
- 任务列表(完成任务)
2.4引用
在段落开头使用 右尖括号 >
,并紧跟一个 空格
来引用文本。也可再次添加 > 嵌套引用。
> 引用1
>> 引用2
>
> 引用1
输出效果:
注:引用的区块中也可以包含其它Markdown元素,例如标题、列表、代码块等。
2.5代码
Markdown中代码块有两种:内联代码块、围栏代码块
内联代码块(使用 1个反引号 ` 将其包起来;反引号中的文本不会被格式化)示例:
`Hello` World.
输出效果:
Hello
World.
围栏代码块(引用的语句为多行,在代码行首缩进 4个空格 或 1个制表符 (Tab) ,也可以使用 3个反引号 ` 置于代码的首行和末行)示例:
```[语言标识符]
在这里插入代码
```
```javascript
var lock = "lock";
```
输出效果:
var lock = "lock";
2.6图像与链接
链接格式为: [链接标题文字](URL地址 可选title属性)
图像格式为:![图像描述文字](URL地址 可选title属性)
注:图片若需要修改位置和大小可以在url地址后面加上#pic_center =120*120
2.7表格
表格使用|
来分割不同的单元格,使用-
来分隔表头和其他行
:-
:将表头及单元格内容左对齐
-:
:将表头及单元格内容右对齐
:-:
:将表头及单元格内容居中
示例代码:
|第一列 | 第二列|第三列 |
|:----------:|----------:|:----------|
|第一列文本居中|第二列文本居右|第二列文本居左|
输出效果:
2.8分割线
Markdown中给出了多种分割线的样式,我们可以使用分割线让文章结构更加的清晰。
我们可以在一行中用三个-
或*
或_
来建立一个分割线,但是注意:在分割线的上面空一行,否则会导致前一行字体放大
---
***
输出效果:
2.9删除线
在需要添加删除线的文本前后添加2个~
~~被删除的文字~~没有被删除的文字
输出效果:
被删除的文字没有被删除的文字
2.10下划线
下划线的使用和html中类似,在需要添加下划线的文字首尾添加<u>文本</u>
<u>这行文字已被添加下划线</u>
输出效果:
2.11数学公式
LaTeX 数学公式 语法列表查询:https://katex.org/docs/supported.html
LaTeX 数学公式 在线编辑工具:https://www.latexlive.com、https://latex.codecogs.com/eqneditor/editor.php
数学公式:当你需要在编辑器中插入数学公式时,可以使用 2个美元符 $
包裹 TeX 或 LaTeX 格式的数学公式来实现。
$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$
输出效果:
上标和下标:上标使用符号 ^
包围、下标使用符号 ~
包围。编辑器不支持时,可分别使用 HTML 标签 <sup>
(superscript)和 <sub>
(subscript)替代。
上标和下标:2^10^,H~2~O
HTML 标签:2<sup>10</sup>,H<sub>2</sub>O
输出效果:
HTML 标签:210,H2O
三、进阶用法
3.1Mermaid图表
3.1.1流程图
官方语法文档:https://mermaid.js.org/syntax/flowchart
示例代码:
```mermaid
flowchart LR
A[长方形] -- 链接 --> B((圆形))
A --> C(圆角长方形)
B --> D{菱形}
C --> D
```
输出效果:
3.1.2时序图
官方语法文档:https://mermaid.js.org/syntax/sequenceDiagram
示例代码:
```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
```
输出效果:
3.1.3甘特图
官方语法文档:https://mermaid.js.org/syntax/gantt
示例代码:
```mermaid
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1, 20d
section Another
Task in Another :2014-01-12, 12d
another task :24d
```
输出效果:
了解更多图表: https://mermaid.js.org/intro