[TOC] #### 1. markdown 介紹 --- ##### 簡介 markdown 是一種輕量級標記語言 主流的代碼托管平臺 gitee、github 倉庫中的說明文檔都是使用 markdown 語言編寫的（README.md） 約翰·格魯伯（John Gruber）在 2004 年創(chuàng)造了 markdown 語言，這個語言的目的是讓人們 **可以使用易讀易寫的純文本格式編寫文檔，然后轉(zhuǎn)換為 HTML 文檔**。使用 markdown 語言編寫文檔已經(jīng)成為了開發(fā)者必備技能之一 ##### 軟件 Typora 官網(wǎng)：<https://typora.io> MarkdownPad 官網(wǎng)：<http://markdownpad.com> ##### 文檔 Markdown 語法文檔：<https://markdown.com.cn> #### 2. markdown 語法 --- ##### 標題 一個 `#` 代表是一級標題，兩個 `#` 代表是二級標題，以此類推，最多支持到六級標題 ``` # 一級標題 ## 二級標題 ... ###### 六級標題 ``` 標題除了可以使用 `#` 生成，也可以使用 `=` 和 `-` 生成 文字下面加兩個 `=` 會生成一級，加兩個 `-` 會生成二級標題。兩個以上 = 或 - 效果是一樣的，習慣上都是寫三個 ``` 一級標題 == 二級標題 -- ``` ##### 段落 `內(nèi)容1` 和 `內(nèi)容2` 經(jīng)過解析后上在一個 p 標簽里面的 而 `內(nèi)容3` 和 `內(nèi)容4` 因為中間隔了一個空行，所以它們分別在兩個 p 標簽中 ``` 內(nèi)容1 內(nèi)容2 內(nèi)容3 內(nèi)容4 ``` ##### 字體 斜體：在文本前后各添加一個 `*` 或 `_`，文本會顯示斜體效果。推薦使用 `_` ``` *面向?qū)ο? _面向?qū)ο骭 ``` 加粗：在文本前后各添加兩個 `*` 或 `_`，可以實現(xiàn)對文本的加粗。推薦使用兩個 `*` ``` **面向?qū)ο?* __面向?qū)ο骭_ ``` 斜體加粗：斜體和加粗結(jié)合使用，下面效果是一樣的。推薦使用 `**_粗斜體_**` ``` ***面向?qū)ο?** ___面向?qū)ο骭__ _**面向?qū)ο?*_ *__面向?qū)ο骭_* **_面向?qū)ο骭** __*面向?qū)ο?__ ``` 刪除線：使用兩個 `~` 可以生成帶刪除線的文本 ``` ~~這段內(nèi)容不要了~~ ``` ##### 列表 a. 有序列表：文本前面添加 `數(shù)字+點+空格` 可以構(gòu)成有序列表 ``` 1. 第一步：xxx 2. 第二步：xxx ``` 最終生成的列表前面的編號和書寫的數(shù)字沒有絕對關(guān)系，默認從 1 開始。如下所示，兩個寫法顯示的效果是一樣的： ``` 1. 第一步：xxx 2. 第二步：xxx 1. 第一步：xxx 1. 第二步：xxx ``` b. 無序列表：文本前面添加 `+` 或 `-` 或`*` 都可以生成無序列表 ``` + 第一項 + 第二項 - 第一項 - 第二項 * 第一項 * 第二項 ``` c. 列表的嵌套：有序列表和無序列表可以任意混合嵌套 ``` + 第一項 + 第 1.1 項 + 第 1.2 項 + 第二項 1. 第 1.1 項 2. 第 1.2 項 ``` d. 任務(wù)列表：有序列表和無序列表都可以作為任務(wù)列表使用，任務(wù)列表就是會在每項前面添加一個復選框 `[x]`：已選中的項目 `[ ]`：未選中的項目 ``` 1. [x] 第一項 2. [ ] 第二項 + [x] 第一項 + [ ] 第二項 ``` ##### 引用 簡單使用： ``` # 引用一行內(nèi)容 > 引用的文本內(nèi)容 # 引用多行內(nèi)容（引用段落） > 引用的文本內(nèi)容 > 引用的文本內(nèi)容 ``` 引用的嵌套： ``` > 引用的文本內(nèi)容 >> 引用的文本內(nèi)容 ``` 也可以引用其他元素，以列表為例： ``` > 這是一個引用內(nèi)容 > + 第一項 > + 第二項 ``` ##### 表格 在 markdown 中可以使用表格，同時可以設(shè)置每列的對齊方式 a. 表格使用豎線 `|` 區(qū)分每一列，在表格頭和表格體之間使用至少三個減號 `-` 進行分隔 ```` | ID | 姓名 | | --- | --- | | 1 | 張三 | | 2 | 李四 | ```` b. 單元格內(nèi)容的對齊方式 下面語法中，第二行的每一列都添加了冒號 `:` + 不添加冒號默認是左對齊 + 左側(cè)添加一個冒號代表左對齊 + 右側(cè)添加一個冒號代表右對齊 + 左右各添加一個冒號代表居中對齊 ```` | ID | 姓名 | 年齡 | | :--- | ---: | :---: | | 1 | 張三 | 18 | | 2 | 李四 | 20 | ```` c. 在表格中使用其他元素 在表格中可以使用斜體單行元素，比如：粗體、斜體、行內(nèi)代碼、超鏈接、圖片、Emoji 表情、HTML 等 ```` | 第一列 | 第一列 | | :--- | ---: | | **粗體** | _張三_ | | `行內(nèi)代碼` | [超鏈接](http://m.waterflosserreview.com) | | :smile: | <span style="color:red">帶顏色的文本</span> | ```` ##### 圖片 a. markdown 添加圖片的語法其實就是在超鏈接語法的基礎(chǔ)上添加一個感嘆號 `!` 鼠標懸停在圖片上時顯示的文本：圖片地址后面跟上 `空格 + 雙引號包裹文本`，它是可選的 ````  ```` 圖片地址支持各種寫法：相對路徑、絕對路徑、網(wǎng)絡(luò)地址 ````    ```` 示例： ```` # 語法  # 生成 <img src="https://img.itqaq.com/xxx.png" alt="這是一個圖片" title="這是懸停時顯示的文本"> ```` b. 帶超鏈接的圖片：很簡單，就是用超鏈接語法將圖片包裹起來 ```` [](超鏈接地址) [](http://m.waterflosserreview.com) ```` ##### 超鏈接 超鏈接：跳轉(zhuǎn)到其他 **markdown 頁面** 或 **網(wǎng)站** a. 跳轉(zhuǎn)到網(wǎng)站 ```` # 語法 [顯示文本](網(wǎng)站地址) # 示例 [百度一下，你就知道](https://www.baidu.com) # 生成 <a href="https://www.baidu.com">百度一下，你就知道</a> ```` b. 跳轉(zhuǎn)到其他 markdown 頁面 ```` [Markdown 標題](./標題) ```` c. 無標簽鏈接：當鏈接標題和鏈接地址相同時，可以使用 `<>` 包裹鏈接地址，寫法更加簡潔 下面兩種寫法效果是一樣的 ```html <https://www.baidu.com> [https://www.baidu.com](https://www.baidu.com) ``` ##### 代碼塊 a. 行內(nèi)代碼：使用一對反引號 `` ` `` 來創(chuàng)建行內(nèi)代碼 ``` `面向?qū)ο骮 ``` 如果在行內(nèi)代碼中需要包含反引號本身，可以使用兩個反引號并加前后空格來創(chuàng)建 ``` `` ` `` ``` b. 代碼塊：文本的每一行 `縮進四個空格` 或 `一個tab制表符縮進` 可以生成代碼塊 echo 'hello world !'; 圍欄式代碼塊：使用 **三個反引號 `` ` ``** 或 **三個波浪號 `~`** 包裹文本內(nèi)容也可以生成代碼塊 圍欄式代碼塊是強烈推薦使用的方式，也是最常見的用法。通過空格或制表符生成代碼塊的方式使用很少 ```php echo 'hello world !'; ``` 代碼塊中的代碼高亮顯示：markdonw 本身并沒有高亮顯示效果，但代碼高亮可以通過第三方插件實現(xiàn) 一般在開始的三個反引號或波浪號的前面指定代碼塊中的語言。從而可以使用第三方插件做到高亮效果 ```` ```php echo 'hello world !'; ``` ~~~html <p>這是一個段落</p> ~~~ ```` ##### 分割線 一行只存在 **三個或以上** 的星號 `*`、減號`-` 下劃線 `_` 會被生成分割線 `<hr/>` 注意： + 雖然星號、減號和下劃線都能生成分割線，但是一般使用減號，輸入更方便 + 在分割線的上下方各留一行空白行，因為沒有空白行，分割線上面的文本可能會被當作二級標題 ```` *** ---- ___ ```` ##### Emoji 表情 在 Markdown 中使用 Emoji 表情有兩種方法：**直接輸入 Emoji 表情** 或 **使用 Emoji 表情短碼** 如果直接輸入 Emoji 表情，那么存儲 Markdown 內(nèi)容的 MySQL 數(shù)據(jù)庫字段編碼不能是 utf8，必須使用 utf8mb4 Emoji 表情短碼放到兩個冒號 `:` 之間，比如： 更多 **Emoji 表情短碼** 參考網(wǎng)站： <https://www.webfx.com/tools/emoji-cheat-sheet>  ##### 內(nèi)嵌 HTML markdown 支持解析 HTML 標簽，將代碼直接放入 markdown 即可，比如： ```html <form action=""> 姓名 <input type="text"> <br> 密碼 <input type="password"> <br> <button>提交</button> </form> ```