Markdown 入门一览
可直接将本文内容保存为.md后缀的文本文件,使用下面的环境打开,查看各语法的实际效果。
菜鸟必备网站: [菜鸟教程](https://www.runoob.com/markdown/md-tutorial.html) 转载整理成文
markdown环境:vscode + Markdown Preview Enhanced + Markdown PDF
vscode：https://code.visualstudio.com/
Markdown Preview Enhanced: https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced Ctrl+P打开vscode命令行,输入：>Markdown: Open Preview to the Side打开vscode的markdown实时预览
Markdown PDF : https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf markdown文件转pdf文件。
标题有两种格式 1.使用=和-标记一级标题和二级标题
展示一级标题 ============== 展示二级标题 -------------- ******** 2.使用#表示1-6级标题 # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题
******* ### 段落标记 段落换行是行末尾两个以上的空格加回车 ### 字体 *斜体文本* _斜体文本_ **粗体文本** __粗体文本__ ***粗斜体文本*** ___粗斜体文本___ ### 分割线 在一行中用三个以上的星号、减号、底线来建立一个分割线,行内不能有其他东西。可以在星号或者减号间插入空格 *** * * * ***** - - - ----- ___ ### 删除线 ~~GOOLE.COM~~ ### 下划线 带下划线文字 ### 脚注 创建脚注格式类似这样[^注1].
[^注1]: 2022年2月25日.
### 列表 支持有序列表和无序列表 无序列表使用星号(*)、加号(+)或者减号(-)作为列标记,这些标记后面要添加一个空格然后填写内容。 * 第一项 * 第二项 + 第一项 + 第二项 - 第一项 - 第二项
有序列表使用数字并加上.号来表示 1. 第一项 2. 第二项
### 列内嵌套 列表嵌套只需要子列表中的选项前面添加四个空格即可： 1. 第一项: - 第一项嵌套的第一个元素 - 第一项嵌套的第二个元素 2. 第二项： - 第二项嵌套的第一个元素 - 第二项嵌套的第二个元素
### 区块 markdown 区块引用时在段落开头使用>符号，然后紧跟一个空格符号: > 区块引用 > 区块2 嵌套区块,一个>符号时最外层,两个>符号是第一层嵌套,以此类推:
> 最外层 >> 第一层嵌套 >>> 第二层嵌套
区块中使用列表: > 区块中使用列表 > 1. 第一项 > 2. 第二项 > + 第一项 > + 第二项 > + 第三项
列表中使用区块： 在列表项目内放进区块,需要在>符号前添加四个空格的缩进 * 第一项 > 第一节 > 第二节 * 第二项
### markdown 代码 如果是段落上的一个函数或者片段的代码可以用反引号把它包起来(')，例如: `printf()` 函数
**代码区块**： 使用三个反引号(```)将代码块包含起来. ``` #include "" ``` ### markdown 链接 链接使用方法如下: [链接名称](链接地址) 或者 <链接地址> 例如: 这是官网链接 [runoob官网](https://www.runoob.com/) 或者:
[runoob]: https://www.runoob.com/
### markdown 图片 图片语法格式如下：   * 开头一个感叹号 * 接着一个方括号,里面放图片的替代文字 * 接近一个普通括号，里面放上图片的网址,最后还可以用引号包住并加上选择性的'title' 属性的文字。
 对图片网址使用变量 这个链接用 1 作为网址变量 [RUNOOB][1]. 然后在文档的结尾为变量赋值(网址)
[1]: http://static.runoob.com/images/runoob-logo.png
### markdown 表格 > 制作表格使用|来分隔不同单元格,使用-来分隔表头和其他行. > 语法格式如下: > > | 表头 | 表头 | > | ---- | ---- | > | 单元格 | 单元格 | > | 单元格 | 单元格 |
> 对齐方式 > * -:设置内容和标题栏居右对齐. > * :-设置内容和标题栏居左对齐. > * :-:设置内容和标题栏居中对齐.
> | 左对齐 | 右对齐 | 居中对齐| > | :-----| ----: | :----: | > | 单 | 单 | 单 | > | 单 | 单 | 单 |
### 高级技巧 * **支持的HTML元素** 不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。目前支持的 HTML 元素有：\ \ \ \ \ \ \
等， 如: 使用 Ctrl+Alt+Del 重启电脑.
* **转义** Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdown 使用反斜杠转义特殊字符. 例如： **文本加粗** \*\* 文本加粗 \*\*
* Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号： > ``` > \ 反斜线 > ` 反引号 > * 星号 > _ 下划线 > {} 花括号 > [] 方括号 > () 小括号 > # 井字号 > + 加号 > - 减号 > . 英文句点 > ! 感叹号 > ``` * 公式 Markdown Preview Enhanced 使用 KaTeX 或者 MathJax 来渲染数学表达式。 KaTeX 拥有比 MathJax 更快的性能，但是它却少了很多 MathJax 拥有的特性。你可以查看 KaTeX supported functions/symbols 来了解 KaTeX 支持那些符号和函数。 默认下的分隔符： * \$...\$ 或者 \(...\) 中的数学表达式将会在行内显示。 * \$\$...\$\$ 或者 \[...\] 或者 ```math 中的数学表达式将会在块内显示。 > $f(x) = sin(x) + 12 $ > $$\sum_{n=1}^{100} n $$ > $$ > \begin{Bmatrix} > a & b \\ > c & d > \end{Bmatrix} > $$ > $$ > \begin{CD} > A @>a>> B \\ > @VbVV @AAcA \\ > C @= D > \end{CD} > $$
* 流程图 在 Markdown 中，定义一个 Markdown流程图 大致分为两段，第一段是定义元素，第二段是定义元素之间的走向。 Markdown流程图语法: >定义元素: `tag=>type: content:>url` tag: 元素名字。 type： 是这个元素的类型。 >>1. start ： 开始 >>2. end ： 结束 >>3. operation ： 操作 >>4. subroutine ： 子程序 >>5. condition ： 条件 >>6. inputoutput： 输入或产出
>连接元素： c2(yes)->io->e c2(no)->op2->e 用 -> 来连接两个元素。需要注意的是 condition 类型，有 yes 和 no 两个分支。
使用 typora 画流程图、时序图(顺序图)、甘特图 1. 横向流程图源码格式： >```mermaid >graph LR >A[方形] -->B(圆角) > B --> C{条件a} > C -->|a=1| D[结果1] > C -->|a=2| E[结果2] > F[横向流程图] >``` 2. 竖向流程图源码格式： >```mermaid >graph TD >A[方形] --> B(圆角) > B --> C{条件a} > C --> |a=1| D[结果1] > C --> |a=2| E[结果2] > F[竖向流程图] >``` 3. 标准流程图源码格式： >```flow >st=>start: 开始框 >op=>operation: 处理框 >cond=>condition: 判断框(是或否?) >sub1=>subroutine: 子流程 >io=>inputoutput: 输入输出框 >e=>end: 结束框 >st->op->cond >cond(yes)->io->e >cond(no)->sub1(right)->op >``` 4. 标准流程图源码格式（横向）： >```flow >st=>start: 开始框 >op=>operation: 处理框 >cond=>condition: 判断框(是或否?) >sub1=>subroutine: 子流程 >io=>inputoutput: 输入输出框 >e=>end: 结束框 >st(right)->op(right)->cond >cond(yes)->io(bottom)->e >cond(no)->sub1(right)->op >``` 5. UML时序图源码样例： >```sequence >对象A->对象B: 对象B你好吗?（请求） >Note right of 对象B: 对象B的描述 >Note left of 对象A: 对象A的描述(提示) >对象B-->对象A: 我很好(响应) >对象A->对象B: 你真的好吗？ >``` 6. UML时序图源码复杂样例： >```sequence >Title: 标题：复杂使用 >对象A->对象B: 对象B你好吗?（请求） >Note right of 对象B: 对象B的描述 >Note left of 对象A: 对象A的描述(提示) >对象B-->对象A: 我很好(响应) >对象B->小三: 你好吗 >小三-->>对象A: 对象B找我了 >对象A->对象B: 你真的好吗？ >Note over 小三,对象B: 我们是朋友 >participant C >Note right of C: 没人陪我玩 >``` 7. UML标准时序图样例： >```mermaid > gantt > dateFormat YYYY-MM-DD > title 软件开发甘特图 > section 设计 > 需求 :done, des1, 2014-01-06,2014-01-08 > 原型 :active, des2, 2014-01-09, 3d > UI设计 : des3, after des2, 5d > 未来任务 : des4, after des3, 5d > section 开发 > 学习准备理解需求 :crit, done, 2014-01-06,24h > 设计框架 :crit, done, after des2, 2d > 开发 :crit, active, 3d > 未来任务 :crit, 5d > 耍 :2d > section 测试 > 功能测试 :active, a1, after des3, 3d > 压力测试 :after a1 , 20h > 测试报告 : 48h >``` 8. 甘特图样例： >```mermaid > gantt > dateFormat YYYY-MM-DD > title 软件开发甘特图 > section 设计 > 需求 :done, des1, >2014-01-06,2014-01-08 > 原型 :active, des2, >2014-01-09, 3d > UI设计 : des3, >after des2, 5d > 未来任务 : des4, after >des3, 5d > section 开发 > 学习准备理解需求 :crit, >done, 2014-01-06,24h > 设计框架 :crit, >done, after des2, 2d > 开发 :crit, >active, 3d > 未来任务 :crit, 5d > 耍 :2d > section 测试 > 功能测试 :active, >a1, after des3, 3d > 压力测试 :after >a1 , 20h > 测试报告 : 48h >```
Markdown Preview Enhanced: https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced Ctrl+P打开vscode命令行,输入：>Markdown: Open Preview to the Side打开vscode的markdown实时预览
Markdown PDF : https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf markdown文件转pdf文件。
标题有两种格式 1.使用=和-标记一级标题和二级标题
展示一级标题 ============== 展示二级标题 -------------- ******** 2.使用#表示1-6级标题 # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题
******* ### 段落标记 段落换行是行末尾两个以上的空格加回车 ### 字体 *斜体文本* _斜体文本_ **粗体文本** __粗体文本__ ***粗斜体文本*** ___粗斜体文本___ ### 分割线 在一行中用三个以上的星号、减号、底线来建立一个分割线,行内不能有其他东西。可以在星号或者减号间插入空格 *** * * * ***** - - - ----- ___ ### 删除线 ~~GOOLE.COM~~ ### 下划线 带下划线文字 ### 脚注 创建脚注格式类似这样[^注1].
[^注1]: 2022年2月25日.
### 列表 支持有序列表和无序列表 无序列表使用星号(*)、加号(+)或者减号(-)作为列标记,这些标记后面要添加一个空格然后填写内容。 * 第一项 * 第二项 + 第一项 + 第二项 - 第一项 - 第二项
有序列表使用数字并加上.号来表示 1. 第一项 2. 第二项
### 列内嵌套 列表嵌套只需要子列表中的选项前面添加四个空格即可： 1. 第一项: - 第一项嵌套的第一个元素 - 第一项嵌套的第二个元素 2. 第二项： - 第二项嵌套的第一个元素 - 第二项嵌套的第二个元素
### 区块 markdown 区块引用时在段落开头使用>符号，然后紧跟一个空格符号: > 区块引用 > 区块2 嵌套区块,一个>符号时最外层,两个>符号是第一层嵌套,以此类推:
> 最外层 >> 第一层嵌套 >>> 第二层嵌套
区块中使用列表: > 区块中使用列表 > 1. 第一项 > 2. 第二项 > + 第一项 > + 第二项 > + 第三项
列表中使用区块： 在列表项目内放进区块,需要在>符号前添加四个空格的缩进 * 第一项 > 第一节 > 第二节 * 第二项
### markdown 代码 如果是段落上的一个函数或者片段的代码可以用反引号把它包起来(')，例如: `printf()` 函数
**代码区块**： 使用三个反引号(```)将代码块包含起来. ``` #include "" ``` ### markdown 链接 链接使用方法如下: [链接名称](链接地址) 或者 <链接地址> 例如: 这是官网链接 [runoob官网](https://www.runoob.com/) 或者:
[runoob]: https://www.runoob.com/
### markdown 图片 图片语法格式如下：   * 开头一个感叹号 * 接着一个方括号,里面放图片的替代文字 * 接近一个普通括号，里面放上图片的网址,最后还可以用引号包住并加上选择性的'title' 属性的文字。
 对图片网址使用变量 这个链接用 1 作为网址变量 [RUNOOB][1]. 然后在文档的结尾为变量赋值(网址)
[1]: http://static.runoob.com/images/runoob-logo.png
### markdown 表格 > 制作表格使用|来分隔不同单元格,使用-来分隔表头和其他行. > 语法格式如下: > > | 表头 | 表头 | > | ---- | ---- | > | 单元格 | 单元格 | > | 单元格 | 单元格 |
> 对齐方式 > * -:设置内容和标题栏居右对齐. > * :-设置内容和标题栏居左对齐. > * :-:设置内容和标题栏居中对齐.
> | 左对齐 | 右对齐 | 居中对齐| > | :-----| ----: | :----: | > | 单 | 单 | 单 | > | 单 | 单 | 单 |
### 高级技巧 * **支持的HTML元素** 不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。目前支持的 HTML 元素有：\ \ \ \ \ \ \
等， 如: 使用 Ctrl+Alt+Del 重启电脑.
* **转义** Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdown 使用反斜杠转义特殊字符. 例如： **文本加粗** \*\* 文本加粗 \*\*
* Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号： > ``` > \ 反斜线 > ` 反引号 > * 星号 > _ 下划线 > {} 花括号 > [] 方括号 > () 小括号 > # 井字号 > + 加号 > - 减号 > . 英文句点 > ! 感叹号 > ``` * 公式 Markdown Preview Enhanced 使用 KaTeX 或者 MathJax 来渲染数学表达式。 KaTeX 拥有比 MathJax 更快的性能，但是它却少了很多 MathJax 拥有的特性。你可以查看 KaTeX supported functions/symbols 来了解 KaTeX 支持那些符号和函数。 默认下的分隔符： * \$...\$ 或者 \(...\) 中的数学表达式将会在行内显示。 * \$\$...\$\$ 或者 \[...\] 或者 ```math 中的数学表达式将会在块内显示。 > $f(x) = sin(x) + 12 $ > $$\sum_{n=1}^{100} n $$ > $$ > \begin{Bmatrix} > a & b \\ > c & d > \end{Bmatrix} > $$ > $$ > \begin{CD} > A @>a>> B \\ > @VbVV @AAcA \\ > C @= D > \end{CD} > $$
* 流程图 在 Markdown 中，定义一个 Markdown流程图 大致分为两段，第一段是定义元素，第二段是定义元素之间的走向。 Markdown流程图语法: >定义元素: `tag=>type: content:>url` tag: 元素名字。 type： 是这个元素的类型。 >>1. start ： 开始 >>2. end ： 结束 >>3. operation ： 操作 >>4. subroutine ： 子程序 >>5. condition ： 条件 >>6. inputoutput： 输入或产出
>连接元素： c2(yes)->io->e c2(no)->op2->e 用 -> 来连接两个元素。需要注意的是 condition 类型，有 yes 和 no 两个分支。
使用 typora 画流程图、时序图(顺序图)、甘特图 1. 横向流程图源码格式： >```mermaid >graph LR >A[方形] -->B(圆角) > B --> C{条件a} > C -->|a=1| D[结果1] > C -->|a=2| E[结果2] > F[横向流程图] >``` 2. 竖向流程图源码格式： >```mermaid >graph TD >A[方形] --> B(圆角) > B --> C{条件a} > C --> |a=1| D[结果1] > C --> |a=2| E[结果2] > F[竖向流程图] >``` 3. 标准流程图源码格式： >```flow >st=>start: 开始框 >op=>operation: 处理框 >cond=>condition: 判断框(是或否?) >sub1=>subroutine: 子流程 >io=>inputoutput: 输入输出框 >e=>end: 结束框 >st->op->cond >cond(yes)->io->e >cond(no)->sub1(right)->op >``` 4. 标准流程图源码格式（横向）： >```flow >st=>start: 开始框 >op=>operation: 处理框 >cond=>condition: 判断框(是或否?) >sub1=>subroutine: 子流程 >io=>inputoutput: 输入输出框 >e=>end: 结束框 >st(right)->op(right)->cond >cond(yes)->io(bottom)->e >cond(no)->sub1(right)->op >``` 5. UML时序图源码样例： >```sequence >对象A->对象B: 对象B你好吗?（请求） >Note right of 对象B: 对象B的描述 >Note left of 对象A: 对象A的描述(提示) >对象B-->对象A: 我很好(响应) >对象A->对象B: 你真的好吗？ >``` 6. UML时序图源码复杂样例： >```sequence >Title: 标题：复杂使用 >对象A->对象B: 对象B你好吗?（请求） >Note right of 对象B: 对象B的描述 >Note left of 对象A: 对象A的描述(提示) >对象B-->对象A: 我很好(响应) >对象B->小三: 你好吗 >小三-->>对象A: 对象B找我了 >对象A->对象B: 你真的好吗？ >Note over 小三,对象B: 我们是朋友 >participant C >Note right of C: 没人陪我玩 >``` 7. UML标准时序图样例： >```mermaid > gantt > dateFormat YYYY-MM-DD > title 软件开发甘特图 > section 设计 > 需求 :done, des1, 2014-01-06,2014-01-08 > 原型 :active, des2, 2014-01-09, 3d > UI设计 : des3, after des2, 5d > 未来任务 : des4, after des3, 5d > section 开发 > 学习准备理解需求 :crit, done, 2014-01-06,24h > 设计框架 :crit, done, after des2, 2d > 开发 :crit, active, 3d > 未来任务 :crit, 5d > 耍 :2d > section 测试 > 功能测试 :active, a1, after des3, 3d > 压力测试 :after a1 , 20h > 测试报告 : 48h >``` 8. 甘特图样例： >```mermaid > gantt > dateFormat YYYY-MM-DD > title 软件开发甘特图 > section 设计 > 需求 :done, des1, >2014-01-06,2014-01-08 > 原型 :active, des2, >2014-01-09, 3d > UI设计 : des3, >after des2, 5d > 未来任务 : des4, after >des3, 5d > section 开发 > 学习准备理解需求 :crit, >done, 2014-01-06,24h > 设计框架 :crit, >done, after des2, 2d > 开发 :crit, >active, 3d > 未来任务 :crit, 5d > 耍 :2d > section 测试 > 功能测试 :active, >a1, after des3, 3d > 压力测试 :after >a1 , 20h > 测试报告 : 48h >```