Test

# Markdown 语法指南这是一篇讲解 :(fab fa-markdown): **Markdown** 基础语法的文章，内容基于 :(fab fa-github): [GitHub Flavored Markdown Spec](https://github.github.com/gfm)，仅以实例的方式展示 [GFM](https://github.github.com/gfm) 所约定的 **Markdown** 语法，简单易懂。 --- ## 1 导语 :(fab fa-markdown): **Markdown** 是一种用于结构化文档编写的轻量级 **「标记语言」** ，它使用简洁、高效的语法替代排版，令使用者专注于写作。 **Markdown** 语法的掌握极其简易，学习成本低，可谓一劳永逸，目前也被越来越多的写作爱好者，撰稿人及程序设计人员广泛使用。 --- ## 2 基础语法 ### 2.1 字体设置 | 输入内容 | 显示效果 | 表现形式 | |:----------:|:--------------:|:--------:| | 正常的文字 | 正常的文字| | | \*倾斜的文字\* | *倾斜的文字* | 斜体 | | \_倾斜的文字\_ | _倾斜的文字_ | 斜体 | | \*\*加粗的文字\*\* | **加粗的文字** | 粗体 | | \*\*\*倾斜并加粗的文字\*\*\* | ***倾斜并加粗的文字*** | 斜体加粗 | | ~~被删的文字~~ | ~~被删的文字~~ | 删除线 | ### 2.2 分级标题 ![多级标题](https://i.loli.net/2019/12/08/CGTpqQRrS9XZ6Dx.png) {{% admonition info "关于 ATX 风格标题和 Setext 风格标题" true %}} 本文只展示 ATX 风格标题，关于 Setext 风格标题的介绍请参考 [GFM Setext headings 说明](https://github.github.com/gfm/#setext-heading)。 {{% /admonition %}} ### 2.3 引用 **引用：** 在整个段落的第一行行首加上大于号「>」。 **输入内容：** ```markdown > 这是一段被引用的文字。 ``` **显示效果：** > 这是一段被引用的文字。 ### 2.4 列表 **2.4.1 无序列表** 使用星号「*」，加号「+」或者减号「-」表示无序列表。 **输入内容：** ```markdown - 项目 1 - 分项目 1 - 分项目 2 - 项目 2 - 分项目 1 - 分项目 2 - 项目 3 ``` **显示效果：** - 项目 1 - 分项目 1 - 分项目 2 - 项目 2 - 分项目 1 - 分项目 2 - 子项目 a - 子项目 b - 项目 3 **2.4.2 有序列表** **输入内容：** ```markdown 1. 项目 1 1. 项目 A 2. 项目 B 一些说明 1. 项目 a 2. 项目 b 3. 项目 c 3. 项目 C 2. 项目 2 3. 项目 3 ``` **显示效果：** 1. 项目 1 1. 项目 A 2. 项目 B 一些说明 1. 项目 a 2. 项目 b 3. 项目 c 3. 项目 C 2. 项目 2 3. 项目 3 ### 2.5 表格 **输入内容：** ```markdown | 姓名 | 性别 | 分数 | | :----| :----:|-----: | | 小明 | 男 | 59 | | 小红 | 女 | 86 | | 小白 | 男 | 100 | ``` **显示效果：** | 姓名 | 性别 | 分数 | | :----| :----:|-----: | | 小明 | 男 | 59 | | 小红 | 女 | 86 | | 小白 | 男 | 100 | ### 2.6 分割线单独在一行中使用三个或者更多的星号（*）、减号（-）或者下划线（_）来创建分割线 **输入内容：** ```markdown *** --- ___ ``` **显示效果（三种输出效果相同）：** *** --- ___ ### 2.7 代码块代码块通常利用反引号「\`」(位于Esc键下方，与中文符号「～」同键位)包裹代码。 **行内代码：** 如果在一行内需要引用代码，仅需用反引号「\`」包括即可。 | 输入内容 | 显示效果 | |:---------------------:|:-----------------:| | 这是一个例子 \`代码\` | 这是一个例子 `代码` | **多行代码：** 上下每行各使用3个反引号「\`」将代码包裹。 **输入内容：** ```markdown ```html Test ``` ``` **显示效果：** ```html Test ``` {{% admonition info "关于缩进式代码块和围栏式代码块" true %}} 本文只展示围栏式代码块，关于缩进式代码块的介绍请参考 [GFM Indented code blocks 说明](https://github.github.com/gfm/#indented-code-block)。 {{% /admonition %}} ### 2.8 链接与图片 **2.8.1 链接** 在 :(fab fa-markdown): **Markdown** 中，插入链接不需要其它按钮，仅需使用 `[显示文本](链接地址)` 这样的语法即可，例如： **输入内容：** ```markdown [知乎](https://www.zhihu.com) ``` **显示效果：** [知乎](https://www.zhihu.com) **2.8.2 图片** 在 :(fab fa-markdown): **Markdown** 中，插入链接不需要其它按钮，仅需使用 `![图片标题](链接地址)` 这样的语法即可，例如： **输入内容：** ```markdown ![天道酬勤](https://i.loli.net/2019/12/13/Xa29DCqge8hEonr.jpg) ``` **显示效果：** ![天道酬勤](https://i.loli.net/2019/12/13/Xa29DCqge8hEonr.jpg) {{% admonition info "关于图片与链接的语法" true %}} 注：插入链接的语法与图片的语法很相似，只是前面多了一个「!」。 {{% /admonition %}} --- ## 3 常用技巧 ### 3.1 换行创建换行符，请以两个或多个空格键结束一行，然后键入Enter(回车键)。 **输入内容：** ```markdown 这是第一行<空格><空格> 这是第二行 ``` **显示效果：** 这是第一行这是第二行 ### 3.2 缩进字符 | 数字缩进 | 字母缩进 | 显示效果 | 表现形式 | |------------------------|----------------------|----------------------|------------| | 未缩进 | 未缩进 | 未缩进 | 未缩进 | | &\#160;缩进1/4中文 | &\nbsp;缩进1/4中文 | 缩进1/4中文 | 缩进1/4中文 | | &\#8194;缩进1/2中文 | &\ensp;缩进1/2中文 | 缩进1/2中文 | 缩进半个中文，1字符 | | &\#8195;缩进1个中文 | &\emsp;缩进1个中文 | 缩进1个中文 | 缩进1个中文，2字符 | ### 3.3 转义字符使用反斜杠转义以下字符： | 输入内容 | 字符 | 名称 | |:--------:|:----:|:-------:| | \\\\ | \\ | 反斜杠 | | \\\` | \` | 反引号 | | \\\* | \* | 星号 | | \\\_ | \_ | 下划线 | | \\ \{\\ \} | \{\} | 大括号 | | \\ \[\\ \] | \[\] | 中括号 | | \\ $\\ $ |  | 括号 | | \\\# | \# | 井号 | | \\\+ | \+ | 加号 | | \\\-\\\- | \-\- | 减号（连字符） | | \\\. | \. | 点 | | \\\! | \! | 感叹号 | | \\\| | \| | 竖线 | ### 3.4 链接的进阶操作 123 ### 3.5 Emoji 表情符号 123 --- ## 4 进阶用法 ### 4.1 制作待办清单 **输入内容：** ```markdown - [ ] 任务 1 * [X] 任务 A - 任务 B + [ ] 任务 a * [ ] 任务 b - [X] 任务 c + [X] 任务 C + [ ] 任务 2 * [X] 任务 3 ``` **显示效果：** - [ ] 任务 1 * [X] 任务 A - 任务 B + [ ] 任务 a * [ ] 任务 b - [X] 任务 c + [X] 任务 C + [ ] 任务 2 * [X] 任务 3 ### 4.2 编写数学公式 {{% admonition info "注意" true %}} 本项非 **Markodwn** 原生功能，借助 [**KaTex**](https://katex.org/) 实现，使用及安装参考[KaTex 文档](https://katex.org/docs/)。 {{% /admonition %}} **4.2.1 行内公式** **行内公式：**\$ x + y = z \$ **4.2.2 行间公式** **行间公式：** $$SSIM(x,y)=\frac{\left(2\mu_x\mu_y+c1\right)\left(\sigma_{xy}+c2\right)} {\left(\mu_x^2+\mu_y^2+c1\right)\left(\sigma_x^2+\sigma_y^2+c2\right)}$$ $$\hat{y} = \mathop{\argmax}_{y \in GEN(x)}{\mathbf{w} \cdot \Phi(x, y)}$$ ### 4.3 绘制流程图 {{% admonition info "注意" true %}} 本项非 **Markodwn** 原生功能，借助 [**Mermaid**](https://mermaid-js.github.io/mermaid/#/) 实现图形插入，使用及安装参考[Mermaid 入门](https://mermaid-js.github.io/mermaid/#/README)。 {{% /admonition %}} **示例：** {{< diagram >}} graph TD A[Hard] -->|Text| B(Round) B --> C{Decision} C -->|One| D[Result 1] C -->|Two| E[Result 2] {{< /diagram >}} ### 4.4 绘制时序图 {{% admonition info "注意" true %}} 本项非 **Markodwn** 原生功能，借助 [**Mermaid**](https://mermaid-js.github.io/mermaid/#/) 实现图形插入，使用及安装参考[Mermaid 入门](https://mermaid-js.github.io/mermaid/#/README)。 {{% /admonition %}} **示例：** {{< diagram >}} sequenceDiagram Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good! {{< /diagram >}} ### 4.5 绘制甘特图 {{% admonition info "注意" true %}} 本项非 **Markodwn** 原生功能，借助 [**Mermaid**](https://mermaid-js.github.io/mermaid/#/) 实现图形插入，使用及安装参考[Mermaid 入门](https://mermaid-js.github.io/mermaid/#/README)。 {{% /admonition %}} **示例：** {{< diagram >}} 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 sec :2014-01-12 , 12d another task : 24d {{< /diagram >}} ### 4.6 绘制状态图 {{% admonition info "注意" true %}} 本项非 **Markodwn** 原生功能，借助 [**Mermaid**](https://mermaid-js.github.io/mermaid/#/) 实现图形插入，使用及安装参考[Mermaid 入门](https://mermaid-js.github.io/mermaid/#/README)。 {{% /admonition %}} **示例：** {{< diagram >}} stateDiagram [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*] {{< /diagram >}} ### 4.7 绘制商业数据图表 {{% admonition info "注意" true %}} 本项非原生 **Markodwn** 功能，借助 [**Apache ECharts**](https://www.echartsjs.com/zh/index.html) 实现图形插入，使用教程参考[5 分钟上手 ECharts](https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts)。 {{% /admonition %}} **示例：** {{< echarts >}} { title: { text: '阶梯瀑布图', subtext: 'From ExcelHome', sublink: 'http://e.weibo.com/1341556070/Aj1J2x5a5' }, tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' }, formatter: function (params) { var tar; if (params[1].value != '-') { tar = params[1]; } else { tar = params[0]; } return tar.name + '
' + tar.seriesName + ' : ' + tar.value; } }, legend: { data:['支出','收入'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type : 'category', splitLine: {show:false}, data : function (){ var list = []; for (var i = 1; i <= 11; i++) { list.push('11月' + i + '日'); } return list; }() }, yAxis: { type : 'value' }, series: [ { name: '辅助', type: 'bar', stack: '总量', itemStyle: { normal: { barBorderColor: 'rgba(0,0,0,0)', color: 'rgba(0,0,0,0)' }, emphasis: { barBorderColor: 'rgba(0,0,0,0)', color: 'rgba(0,0,0,0)' } }, data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292] }, { name: '收入', type: 'bar', stack: '总量', label: { normal: { show: true, position: 'top' } }, data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-'] }, { name: '支出', type: 'bar', stack: '总量', label: { normal: { show: true, position: 'bottom' } }, data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203] } ] } {{< /echarts >}}