【原】無腦操做:Markdown能夠這樣玩

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: 別久坐,多喝水
```

---

        

相關文章
相關標籤/搜索