[TOC] #### 1. markdown 介绍 --- ##### 简介 markdown 是一种轻量级标记语言 主流的代码托管平台 gitee、github 仓库中的说明文档都是使用 markdown 语言编写的（README.md） 约翰·格鲁伯（John Gruber）在 2004 年创造了 markdown 语言，这个语言的目的是让人们 **可以使用易读易写的纯文本格式编写文档，然后转换为 HTML 文档**。使用 markdown 语言编写文档已经成为了开发者必备技能之一 ##### 软件 Typora 官网：<https://typora.io> MarkdownPad 官网：<http://markdownpad.com> ##### 文档 Markdown 语法文档：<https://markdown.com.cn> #### 2. markdown 语法 --- ##### 标题 一个 `#` 代表是一级标题，两个 `#` 代表是二级标题，以此类推，最多支持到六级标题 ```plaintext # 一级标题 ## 二级标题 ... ###### 六级标题 ``` 标题除了可以使用 `#` 生成，也可以使用 `=` 和 `-` 生成 文字下面加两个 `=` 会生成一级，加两个 `-` 会生成二级标题。两个以上 = 或 - 效果是一样的，习惯上都是写三个 ```plaintext 一级标题 == 二级标题 -- ``` ##### 段落 `内容1` 和 `内容2` 经过解析后上在一个 p 标签里面的 而 `内容3` 和 `内容4` 因为中间隔了一个空行，所以它们分别在两个 p 标签中 ```plaintext 内容1 内容2 内容3 内容4 ``` ##### 字体 斜体：在文本前后各添加一个 `*` 或 `_`，文本会显示斜体效果。推荐使用 `_` ```plaintext *面向对象* _面向对象_ ``` 加粗：在文本前后各添加两个 `*` 或 `_`，可以实现对文本的加粗。推荐使用两个 `*` ```plaintext **面向对象** __面向对象__ ``` 斜体加粗：斜体和加粗结合使用，下面效果是一样的。推荐使用 `**_粗斜体_**` ```plaintext ***面向对象*** ___面向对象___ _**面向对象**_ *__面向对象__* **_面向对象_** __*面向对象*__ ``` 删除线：使用两个 `~` 可以生成带删除线的文本 ```plaintext ~~这段内容不要了~~ ``` ##### 列表 a. 有序列表：文本前面添加 `数字+点+空格` 可以构成有序列表 ```plaintext 1. 第一步：xxx 2. 第二步：xxx ``` 最终生成的列表前面的编号和书写的数字没有绝对关系，默认从 1 开始。如下所示，两个写法显示的效果是一样的： ```plaintext 1. 第一步：xxx 2. 第二步：xxx 1. 第一步：xxx 1. 第二步：xxx ``` b. 无序列表：文本前面添加 `+` 或 `-` 或`*` 都可以生成无序列表 ```plaintext + 第一项 + 第二项 - 第一项 - 第二项 * 第一项 * 第二项 ``` c. 列表的嵌套：有序列表和无序列表可以任意混合嵌套 ```plaintext + 第一项 + 第 1.1 项 + 第 1.2 项 + 第二项 1. 第 1.1 项 2. 第 1.2 项 ``` d. 任务列表：有序列表和无序列表都可以作为任务列表使用，任务列表就是会在每项前面添加一个复选框 `[x]`：已选中的项目 `[ ]`：未选中的项目 ```plaintext 1. [x] 第一项 2. [ ] 第二项 + [x] 第一项 + [ ] 第二项 ``` ##### 引用 简单使用： ```plaintext # 引用一行内容 > 引用的文本内容 # 引用多行内容（引用段落） > 引用的文本内容 > 引用的文本内容 ``` 引用的嵌套： ```plaintext > 引用的文本内容 >> 引用的文本内容 ``` 也可以引用其他元素，以列表为例： ```plaintext > 这是一个引用内容 > + 第一项 > + 第二项 ``` ##### 表格 在 markdown 中可以使用表格，同时可以设置每列的对齐方式 a. 表格使用竖线 `|` 区分每一列，在表格头和表格体之间使用至少三个减号 `-` 进行分隔 ````plaintext | ID | 姓名 | | --- | --- | | 1 | 张三 | | 2 | 李四 | ```` b. 单元格内容的对齐方式 下面语法中，第二行的每一列都添加了冒号 `:` + 不添加冒号默认是左对齐 + 左侧添加一个冒号代表左对齐 + 右侧添加一个冒号代表右对齐 + 左右各添加一个冒号代表居中对齐 ````plaintext | ID | 姓名 | 年龄 | | :--- | ---: | :---: | | 1 | 张三 | 18 | | 2 | 李四 | 20 | ```` c. 在表格中使用其他元素 在表格中可以使用斜体单行元素，比如：粗体、斜体、行内代码、超链接、图片、Emoji 表情、HTML 等 ````plaintext | 第一列 | 第一列 | | :--- | ---: | | **粗体** | _张三_ | | `行内代码` | [超链接](https://www.itqaq.com) | | :smile: | <span style="color:red">带颜色的文本</span> | ```` ##### 图片 a. markdown 添加图片的语法其实就是在超链接语法的基础上添加一个感叹号 `!` 鼠标悬停在图片上时显示的文本：图片地址后面跟上 `空格 + 双引号包裹文本`，它是可选的 ````plaintext  ```` 图片地址支持各种写法：相对路径、绝对路径、网络地址 ````plaintext    ```` 示例： ````plaintext # 语法  # 生成 <img src="https://img.itqaq.com/xxx.png" alt="这是一个图片" title="这是悬停时显示的文本"> ```` b. 带超链接的图片：很简单，就是用超链接语法将图片包裹起来 ````plaintext [](超链接地址) [](https://www.itqaq.com) ```` ##### 超链接 超链接：跳转到其他 **markdown 页面** 或 **网站** a. 跳转到网站 ````plaintext # 语法 [显示文本](网站地址) # 示例 [百度一下，你就知道](https://www.baidu.com) # 生成 <a href="https://www.baidu.com">百度一下，你就知道</a> ```` b. 跳转到其他 markdown 页面 ````plaintext [Markdown 标题](./标题) ```` c. 无标签链接：当链接标题和链接地址相同时，可以使用 `<>` 包裹链接地址，写法更加简洁 下面两种写法效果是一样的 ```html <https://www.baidu.com> [https://www.baidu.com](https://www.baidu.com) ``` ##### 代码块 a. 行内代码：使用一对反引号 `` ` `` 来创建行内代码 ```plaintext `面向对象` ``` 如果在行内代码中需要包含反引号本身，可以使用两个反引号并加前后空格来创建 ```plaintext `` ` `` ``` b. 代码块：文本的每一行 `缩进四个空格` 或 `一个tab制表符缩进` 可以生成代码块 echo 'hello world !'; 围栏式代码块：使用 **三个反引号 `` ` ``** 或 **三个波浪号 `~`** 包裹文本内容也可以生成代码块 围栏式代码块是强烈推荐使用的方式，也是最常见的用法。通过空格或制表符生成代码块的方式使用很少 ```php echo 'hello world !'; ``` 代码块中的代码高亮显示：markdonw 本身并没有高亮显示效果，但代码高亮可以通过第三方插件实现 一般在开始的三个反引号或波浪号的前面指定代码块中的语言。从而可以使用第三方插件做到高亮效果 ```` ```php echo 'hello world !'; ``` ~~~html <p>这是一个段落</p> ~~~ ```` ##### 分割线 一行只存在 **三个或以上** 的星号 `*`、减号`-` 下划线 `_` 会被生成分割线 `<hr/>` 注意： + 虽然星号、减号和下划线都能生成分割线，但是一般使用减号，输入更方便 + 在分割线的上下方各留一行空白行，因为没有空白行，分割线上面的文本可能会被当作二级标题 ```plaintext *** ---- ___ ``` ##### Emoji 表情 在 Markdown 中使用 Emoji 表情有两种方法：**直接输入 Emoji 表情** 或 **使用 Emoji 表情短码** 如果直接输入 Emoji 表情，那么存储 Markdown 内容的 MySQL 数据库字段编码不能是 utf8，必须使用 utf8mb4 Emoji 表情短码放到两个冒号 `:` 之间，比如： 更多 **Emoji 表情短码** 参考网站： <https://www.webfx.com/tools/emoji-cheat-sheet>  ##### 内嵌 HTML markdown 支持解析 HTML 标签，将代码直接放入 markdown 即可，比如： ```html <form action=""> 姓名 <input type="text"> <br> 密码 <input type="password"> <br> <button>提交</button> </form> ```