## **markdown是什么** * Markdown 是一種輕量級標記語言，它允許人們使用易讀易寫的純文本格式編寫文檔。 * Markdown 語言在 2004 由約翰·格魯伯（英語：John Gruber）創建。 * Markdown 編寫的文檔可以導出 HTML 、Word、圖像、PDF、Epub 等多種格式的文檔。 * Markdown 編寫的文檔后綴為**.md**,**.markdown** ## **markdown能干什么** Markdown 能被使用來撰寫電子書，如：Gitbook。 當前許多網站都廣泛使用 Markdown 來撰寫幫助文檔或是用于論壇上發表消息。例如：GitHub、簡書、博客園、reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge等。 本篇博客就是通過markdown編寫的，我用的編輯器是Typora，跨平臺，可以實時預覽，而且可以自定義主題樣式，堪稱完美，后面我會介紹。 ## **如何使用** 使用markdown來編寫文檔，非常方便，非常便捷，可以像純文本一樣保存和編輯，而且應用非常廣泛。 ### **編寫標題** 標題顧名思義，就是title，markdown中提供了6種標題，從1到6依次遞減。具體的表示方法如下： ~~~text # 一級標題(h1) ## 二級標題(h2) ### 三級標題(h3) #### 四級標題(h4) ##### 五級標題(h5) ###### 六級標題(h6) ~~~ 解釋一下，標題的樣式是#加空格加標題內容，#數量越多，表示標題層級越低（字體越小），上面標題預覽效果如下：  ### **Markdown段落** Markdown 段落沒有特殊的格式，直接編寫文字就好，**段落的換行是使用兩個以上空格加上回車**。 ### **字體** Markdown 可以使用以下幾種字體： ~~~text *斜體文本* _斜體文本_ **粗體文本** __粗體文本__ ***粗斜體文本*** ___粗斜體文本___ ~~~ 顯示效果如下：  ### **分割線** 你可以在一行中用三個以上的星號、減號、底線來建立一個分隔線，行內不能有其他東西。你也可以在星號或是減號中間插入空格。下面每種寫法都可以建立分隔線： ~~~text *** * * * ***** - - - ---------- ~~~ 顯示效果如下所示：  ### **刪除線** 如果段落上的文字要添加刪除線，只需要在文字的兩端加上兩個波浪線**~~**即可，實例如下： ~~~text RUNOOB.COM GOOGLE.COM ~~BAIDU.COM~~ ~~~ 顯示效果如下：  ### **下劃線** 下劃線可以通過 HTML 的`<u>`標簽來實現： ~~~text <u>帶下劃線文本</u> ~~~ 先試下效果如下所示：  ### **腳注** 腳注是對文本的補充說明。 Markdown 腳注的格式如下: ~~~text [^要注明的文本] ~~~ 以下實例演示了腳注的用法： ~~~text 創建腳注格式類似這樣 [^RUNOOB]。 [^RUNOOB]: 菜鳥教程 -- 學的不僅是技術，更是夢想！！！ ~~~ 演示效果如下：  ### **Markdown列表** Markdown 支持有序列表和無序列表。 無序列表使用星號(***)、加號(+**)或是減號(-*\*)作為列表標記： ~~~text * 第一項 * 第二項 * 第三項 + 第一項 + 第二項 + 第三項 - 第一項 - 第二項 - 第三項 ~~~ 演示效果：  有序列表使用數字并加上**.**號來表示，如： ~~~text 1. 第一項 2. 第二項 3. 第三項 ~~~ 演示效果：  ### **列表嵌套** 列表嵌套只需在子列表中的選項添加四個空格即可： ~~~text 1. 第一項： - 第一項嵌套的第一個元素 - 第一項嵌套的第二個元素 2. 第二項： - 第二項嵌套的第一個元素 - 第二項嵌套的第二個元素 ~~~ 演示效果：  ### **Markdown區塊** Markdown 區塊引用是在段落開頭使用**\>**符號 ，然后后面緊跟一個**空格**符號： ~~~text > 區塊引用 > 菜鳥教程 > 學的不僅是技術更是夢想 ~~~ 顯示結果如下：  另外區塊是可以嵌套的，一個**\>**符號是最外層，兩個**\>**符號是第一層嵌套，以此類推： ~~~text > 最外層 > > 第一層嵌套 > > > 第二層嵌套 ~~~ 演示效果如下：  ### **區塊中使用列表** 區塊中使用列表實例如下： ~~~text > 區塊中使用列表 > 1. 第一項 > 2. 第二項 > + 第一項 > + 第二項 > + 第三項 ~~~ 演示如下：  ### **列表中使用區塊** 如果要在列表項目內放進區塊，那么就需要在**\>**前添加四個空格的縮進。 區塊中使用列表實例如下： ~~~text * 第一項 > 菜鳥教程 > 學的不僅是技術更是夢想 * 第二項 ~~~ 演示效果如下：  ### **Markdown代碼** 如果是段落上的一個函數或片段的代碼可以用反引號把它包起來（**`**），例如： ~~~text `printf()` 函數 ~~~ 演示效果如下： `printf()`函數 ### **代碼塊** 代碼區塊使用**```**包裹一段代碼，并指定一種語言（也可以不指定）： ~~~text ```javascript $(document).ready(function () { alert('RUNOOB'); }); ``` ~~~ 顯示效果如下：  ### **Markdown鏈接** 鏈接使用方法如下： ~~~text [鏈接名稱](鏈接地址) 或者 <鏈接地址> ~~~ 例如： ~~~text 這是一個鏈接 [云中志](https://www.cnblogs.com/caoleiCoding/) ~~~ 顯示效果如下：  直接使用鏈接地址： ~~~text <https://www.cnblogs.com/caoleiCoding/> ~~~ 顯示效果：  ### **高級鏈接** ~~~text 鏈接也可以用變量來代替，文檔末尾附帶變量地址： 這個鏈接用 1 作為網址變量 [Google][1] 這個鏈接用 runoob 作為網址變量 [Coding][Coding] 然后在文檔的結尾為變量賦值（網址） [1]: http://www.google.com/ [Coding]: https://www.cnblogs.com/caoleiCoding/ ~~~ 顯示效果如下：  ### **Markdown圖片** Markdown 圖片語法格式如下： ~~~text   ~~~ * 開頭一個感嘆號 ! * 接著一個方括號，里面放上圖片的替代文字 * 接著一個普通括號，里面放上圖片的網址，最后還可以用引號包住并加上選擇性的 'title' 屬性的文字。 使用示例： ~~~text   ~~~ 顯示效果：  當然，你也可以像網址那樣對圖片網址使用變量: ~~~text 這個鏈接用 1 作為網址變量 [博客園][1]. 然后在文檔的結尾為變量賦值（網址） [1]: https://i-beta.cnblogs.com/assets/adminlogo.gif ~~~ 顯示效果：  Markdown 還沒有辦法指定圖片的高度與寬度，如果你需要的話，你可以使用普通的  標簽。 ~~~text <img src="http://static.runoob.com/images/runoob-logo.png" width="50%"> ~~~ ### **Markdown表格** Markdown 制作表格使用**|**來分隔不同的單元格，使用**\-**來分隔表頭和其他行。 語法格式如下： ~~~text | 表頭 | 表頭 | | ---- | ---- | | 單元格 | 單元格 | | 單元格 | 單元格 | ~~~ 顯示效果如下：  ### **對齊方式** **我們可以設置表格的對齊方式：** * **\-:**設置內容和標題欄居右對齊。 * **:-**設置內容和標題欄居左對齊。 * **:-:**設置內容和標題欄居中對齊。 示例如下： ~~~text | 左對齊 | 右對齊 | 居中對齊 | | :-----| ----: | :----: | | 單元格 | 單元格 | 單元格 | | 單元格 | 單元格 | 單元格 | ~~~ 顯示效果如下：  ### **Markdown高級技巧** ### **支持的 HTML 元素** 不在 Markdown 涵蓋范圍之內的標簽，都可以直接在文檔里面用 HTML 撰寫。 目前支持的 HTML 元素有：`<kbd>``<b>``<i>``<em>``<sup>``<sub>``<br>`等 ，如： ~~~text 使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重啟電腦 ~~~ 顯示效果：  ### **轉義** Markdown 使用了很多特殊符號來表示特定的意義，如果需要顯示特定的符號則需要使用轉義字符，Markdown 使用反斜杠轉義特殊字符： ~~~text **文本加粗** \*\* 正常顯示星號 \*\* ~~~ 顯示效果：  Markdown 支持以下這些符號前面加上反斜杠來幫助插入普通的符號： ~~~text \ 反斜線 ` 反引號 * 星號 _ 下劃線 {} 花括號 [] 方括號 () 小括號 # 井字號 + 加號 - 減號 . 英文句點 ! 感嘆號 ~~~ ### **公式** 當你需要在編輯器中插入數學公式時，可以使用兩個美元符 $$ 包裹 TeX 或 LaTeX 格式的數學公式來實現。提交后，問答和文章頁會根據需要加載 Mathjax 對數學公式進行渲染。如： ~~~text $$ \mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\ \end{vmatrix} ${$tep1}{\style{visibility:hidden}{(x+1)(x+1)}} $$ ~~~ 顯示效果：  ### **圖表繪制** ### **橫向流程圖** ~~~text ?```mermaid graph LR A[方形] -->B(圓角) B --> C{條件a} C -->|a=1| D[結果1] C -->|a=2| E[結果2] F[橫向流程圖] ?``` ~~~ 顯示效果：  ### **豎向流程圖** ~~~text ?```mermaid graph TD A[方形] --> B(圓角) B --> C{條件a} C --> |a=1| D[結果1] C --> |a=2| E[結果2] F[豎向流程圖] ?``` ~~~ 顯示效果：  ### **標準流程圖** ~~~text ?```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 ?``` ~~~ 顯示效果：  ### **標準流程圖（橫向）** ~~~text ?```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 ?``` ~~~ 演示效果：  ### **UML時序圖** ~~~text ?```sequence 對象A->對象B: 對象B你好嗎?（請求） Note right of 對象B: 對象B的描述 Note left of 對象A: 對象A的描述(提示) 對象B-->對象A: 我很好(響應) 對象A->對象B: 你真的好嗎？ ?``` ~~~ 顯示效果：  ### **UML時序圖(復雜)** ~~~text ?```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: 沒人陪我玩 ?``` ~~~ 顯示效果：  ### **UML標準時序圖** ~~~text ?```mermaid %% 時序圖例子,-> 直線，-->虛線，->>實線箭頭 sequenceDiagram participant 張三 participant 李四 張三->王五: 王五你好嗎？ loop 健康檢查 王五->王五: 與疾病戰斗 end Note right of 王五: 合理 食物 <br/>看醫生... 李四-->>張三: 很好! 王五->李四: 你怎么樣? 李四-->王五: 很好! ?``` ~~~ 顯示效果：  ### **甘特圖樣例** ~~~text ?```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 ?``` ~~~ 顯示效果：