1、背景:javascript
Markdown是一種純文本格式的標記語言。經過簡單的標記語法,能夠使普通文本內容具備必定的格式。由於語法簡單明瞭、功能又比純文本強大,因此很適合做爲開發人員的書寫工具。
Markdown的編輯器不少,經常使用的有:MarkdownPad、Typora、MarkdownEditor等。不過在最近的嘗試中,發現了一個比較適合開發人員使用的書寫工具VSCode。html
2、安裝:前端
在VSCode官網:https://code.visualstudio.com/#alt-downloads進行下載,根據本身的操做系統版本選擇對應的安裝版本。VSCode的安裝很簡單,選擇安裝路徑一路回車安裝就行了。java
注意:VSCode默認的自定義插件位置在C:\Users\用戶名\.vscode\extensions編程
3、配置:編輯器
VSCode好用的插件不少,列了以下這幾個,其中Markdown工具和Markdown轉PDF工具是搭建Markdown書寫環境所必需的。工具
一、Chinese中文語言支持插件(安裝後須要重啓VSCode)編碼
二、Material Theme主題插件spa
三、Material Icon Theme主題圖標插件操作系統
四、Markdown Preview Enhanced插件
五、Markdown PDF插件
4、使用:
經常使用的Markdown語法
1 # 0一、註釋 2 3 - 通用寫法、使用HTML註釋 4 ```html 5 <!-- HTML的註釋 --> 6 ``` 7 <!-- 這是HTML註釋,看不見吧 --> 8 9 --- 10 11 # 0二、標題 12 13 # 級別1 14 ## 級別2 15 ### 級別3 16 #### 級別4 17 ##### 級別5 18 ###### 級別6 19 20 --- 21 22 # 0三、引用 23 24 > 經常用來引用其餘的資料 25 26 > 曹植.《洛神賦》 27 > 似乎兮若輕雲之蔽月,飄飄兮若流風之迴雪 28 --- 29 30 # 0四、粗體斜體 31 32 *這會是 斜體 的文字* 33 _這會是 斜體 的文字_ 34 35 **這會是 粗體 的文字** 36 __這會是 粗體 的文字__ 37 38 _能夠 **組合** 使用粗體 和 斜體符號_ 39 40 ~~文字將會被橫線刪除~~ 41 42 --- 43 44 # 0五、列表 45 46 ## 一、無序列表 47 * 安徽省 48 * 合肥市 49 * 銅陵市 50 * 淮南市 51 - 江蘇省 52 + 南京市 53 + 蘇州市 54 55 ## 二、有序列表 56 1. 浙江省 57 1.1. 杭州市 58 1.2. 寧波市 59 2. 湖北省 60 2.1. 武漢市 61 2.2. 荊州市 62 63 --- 64 65 # 0六、分隔線 66 67 *** 68 ___ 69 --- 70 71 # 0七、代碼塊 72 73 ```java 74 class Person { 75 public void static main() { 76 System.out.println("小前端也會服務端編程"); 77 } 78 } 79 ``` 80 81 <!-- highlight 語法高亮 --> 82 ```javascript{highlight=2-6} 83 var programmer = { 84 name : '尤JJ', 85 gender : '女', 86 work: function() { 87 console.log('廢寢忘食'); 88 } 89 } 90 ``` 91 92 --- 93 94 # 0八、連接 95 96 [百度](https://www.baidu.com) 97 98 --- 99 100 # 0九、任務列表 101 102 - [x] 吃飯 103 - [ ] 睡覺 104 - [x] 搬磚 105 106 --- 107 108 # 十、表格 109 110 <!-- 111 :---: 居中 112 :----- 居左 113 ------: 居右 114 --> 115 |序號 |姓名 |性別 |薪資 | 116 |:---:|:-----|:---:|------:| 117 |1 |武JC |男 |987.65| 118 |2 |尤JJ |女 |123.45| 119 120 ---
Markdown中也能夠繪製圖表,以繪製流程圖 和 序列圖爲例
# 0一、繪製流程圖 <!-- 基於flowchart.js繪製 --> ```flow start=>start: 項目啓動 end=>end: 項目結束 opt1=>operation: 需求分析 condition=>condition: 需求評審 opt3=>operation: 編碼實現 start->opt1(right)->condition condition(yes,right)->opt3 condition(no)->end opt3->end ``` --- # 0二、繪製序列圖 <!-- 基於js-sequence-diagrams繪製 --> ```sequence Title: 平常交流 Boy->Girl: 鑰匙、傘、早飯 Note right of Girl: 心煩意亂... Girl-->Boy: 不關你事兒 Boy->>Girl: 別久坐,多喝水 ``` ---