markdown教程 · 前端技術指南

## 前言 Markdown 語法的目標是：成為一種適用于網絡的書寫語言,那么作為愛寫文章的你應該掌握下它的基本語法。 ## 概述 [官方中文地址](http://www.markdown.cn/) [mdeditor在線教程](https://www.zybuluo.com/mdeditor?url=https://www.zybuluo.com/static/editor/md-help.markdown) * 兼容 HTML >不在 Markdown 涵蓋范圍之內的標簽，都可以直接在文檔里面用 HTML 撰寫。不需要額外標注這是 HTML 或是 Markdown；只要直接加標簽就可以了。要制約的只有一些 HTML 區塊元素――比如 `<div>`、`<table>`、`<pre>`、`<p>` 等標簽，必須在前后加上空行與其它內容區隔開，還要求它們的開始標簽與結尾標簽不能用制表符或空格來縮進。Markdown 的生成器有足夠智能，不會在 HTML 區塊標簽外加上不必要的` <p>` 標簽。 * 比如下面的表格就是用html代碼完成的，并不沖突。在hexo驅動中，可能需要去空行壓縮處理才能去掉多余的換行。 ``` html <table> <tr> <td>自定義名稱</td> <td>自定義描述</td> </tr> <tr> <td>姓名</td> <td>xx</td> </tr> </table> ``` <table style="margin-top:0"><tr><td>自定義名稱</td><td>自定義描述</td></tr><tr><td>姓名</td><td>xx</td></tr></table> * 特殊字符自動轉換類似html文件中： < 和 & ，markdown會自動轉化，不需要手動處理。 ## 區塊元素 ### 段落和換行連續的文本都會識別為一個段落，中間有換行識別為換行，如果想另起一個段落需要中間加空白行。 ### 標題 * Markdown 支持兩種標題的語法，類 Setext 和類 atx 形式。類 Setext 形式是用底線的形式，利用 = （最高階標題）和 - （第二階標題），例如：任何數量的 = 和 - 都可以有效果。 * 類 Atx 形式則是在行首插入 1 到 6 個 # ，對應到標題 1 到 6 階，例如：末尾的閉合可以不用加. ### 區塊引用 Markdown 標記區塊引用是使用類似 email 中用 > 的引用方式。內部可以在寫引入或者列表，你可以在一個引入內只寫一個，避免重復。 ### 列表的使用無序列表可以用*、-、+等，熟練使用一種即可；有序列表用數字加英"." ,數字不會影響有序列表的顯示。需要注意的是無序和有序列表內容開始之前都要加空格，另外一個項目之內有空白行的會把之前的內容用p標簽包裹。 ### 代碼區塊代碼區塊可以用一個tab或者四個空格。 ### 分割線你可以在一行中用三個以上的星號、減號、底線來建立一個分隔線，行內不能有其他東西。你也可以在星號或是減號中間插入空格。下面每種寫法都可以建立分隔線。 ## 區段元素 ### 鏈接用中括號寫連接文字，小括號寫連接地址，或者冒號加連接地址(地址可以為相對地址)。 ### 強調 Markdown 使用星號（*）和底線（_）作為標記強調字詞的符號，被 * 或 _ 包圍的字詞會被轉成用 <em> 標簽包圍，用兩個 * 或 _ 包起來的話，則會被轉成 <strong> ### 代碼反引號可以用來引入代碼，引入代碼段用3個**"\`"**+ codetype 開始，以 3個**"\`"**結束即可。 ### 圖片嘆號+中括號+圖片路徑，目前沒辦法指定圖片大小，可以使用普通的img標簽來定義圖片。 ## 其他 ### 反斜杠 Markdown 可以利用反斜杠來插入一些在語法中有其它意義的符號，例如：如果你想要用星號加在文字旁邊的方式來做出強調效果（但不用 <em> 標簽），你可以在星號的前面加上反斜杠 ### 自動鏈接 Markdown 支持以比較簡短的自動鏈接形式來處理網址和電子郵件信箱，只要是用尖括號包起來， Markdown 就會自動把它轉成鏈接。一般網址的鏈接文字就和鏈接地址一樣。 <https://csnikey.github.io/blog> ### 刪除線前后用`~~`分別隔離就可以實現刪除線,比如下面的例子 ~~123~~ ### 注腳支持的部分追加^可以實現注腳的功能： [^123f ] ## 表格表格頭與表格用---|--- 隔開，每列用|隔開即可。需要注意的是表格需要空一行開始。如果你需要文本水平居中，可以在左右加：實現。項目|描述 ---|--- 產品|自行車 ## LaTeX 公式 $ 表示行內公式：質能守恒方程可以用一個很簡潔的方程式來表達。$$ 表示整行公式：訪問 [MathJax](http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference) 參考更多使用方法。 ## 時序圖時序圖主要有一下幾個元素：角色，對象，生命線，激活器和消息，[序列圖語法參考](http://bramp.github.io/js-sequence-diagrams/) #### 示例 1 ```seq Alice->Bob: Hello Bob, how are you? Note right of Bob: Bob thinks Bob-->Alice: I am good thanks! ``` #### 示例 2 ```seq Title: Here is a title A->B: Normal line B-->C: Dashed line C->>D: Open arrow D-->>A: Dashed open arrow ``` ## 甘特圖甘特圖內在思想簡單。基本是一條線條圖，橫軸表示時間，縱軸表示活動（項目），線條表示在整個期間上計劃和實際的活動完成情況。它直觀地表明任務計劃在什么時候進行，及實際進展與計劃要求的對比。 ```gantt title 項目開發流程 section 項目確定需求分析 :a1, 2016-06-22, 3d 可行性報告 :after a1, 5d 概念驗證 : 5d section 項目實施概要設計 :2016-07-05 , 5d 詳細設計 :2016-07-08, 10d 編碼 :2016-07-15, 10d 測試 :2016-07-22, 5d section 發布驗收發布: 2d 驗收: 3d ``` 更多語法參考：[甘特圖語法參考](https://knsv.github.io/mermaid/#gant-diagrams) ## Mermaid 流程圖 ```graphLR A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two] ``` 更多語法參考：[Mermaid 流程圖語法參考](https://knsv.github.io/mermaid/#flowcharts-basic-syntax) ## Mermaid 序列圖 ```sequence Alice->John: Hello John, how are you? loop every minute John-->Alice: Great! end ``` 更多語法參考：[Mermaid 序列圖語法參考](https://knsv.github.io/mermaid/#sequence-diagrams) ## 待辦事宜 Todo 列表使用帶有 [ ] 或 [x] （未完成或已完成）項的列表語法撰寫一個待辦事宜列表，并且支持子列表嵌套以及混用Markdown語法，例如： - [ ] **Cmd Markdown 開發** - [ ] 改進 Cmd 渲染算法，使用局部渲染技術提高渲染效率 - [ ] 支持以 PDF 格式導出文稿 - [x] 新增Todo列表功能 [語法參考](https://github.com/blog/1375-task-lists-in-gfm-issues-pulls-comments) - [x] 改進 LaTex 功能 - [x] 修復 LaTex 公式渲染問題 - [x] 新增 LaTex 公式編號功能 [語法參考](http://docs.mathjax.org/en/latest/tex.html#tex-eq-numbers) - [ ] **七月旅行準備** - [ ] 準備郵輪上需要攜帶的物品 - [ ] 瀏覽日本免稅店的物品 - [x] 購買藍寶石公主號七月一日的船票 ## 參考地址 - [作業部落教程](https://www.zybuluo.com/mdeditor?url=https://www.zybuluo.com/static/editor/md-help.markdown)