-
首先安裝vscode工具，下載地址如下： https://code.visualstudio.com/
-
在vs code的擴展中安裝： Markdown Preview Enhanced 這款插件，安裝完成重新加載即可生效
-
新建一個.md文件
Visual Studio Code 原生就支持高亮Markdown的語法，想要一邊編輯一遍預覽，有兩種方法：
3.1. Ctrl + Shift + P 調出主命令框，輸入 Markdown，應該會匹配到幾項 Markdown相關命令2.2. 先按Ctrl + K，然后放掉，緊接着再按 v，也能調出實時預覽框。【要在英文輸入狀態下】
3.3 直接點擊快捷圖標
還可以在預覽效果的界面中右鍵鼠標選擇在不同平台預覽，如可以在瀏覽器中預覽
其中默認打開的瀏覽器是IE瀏覽器，可以直接Copy瀏覽器地址使用Chrome瀏覽器打開
可以發現在瀏覽器中預覽markdown文檔已經被編譯成HTML文檔了。
------------------------------------------------------------附錄Markdown語法------------------------------------------------------------------------------
vs code 使用 Markdown 編寫文檔
1. 直接使用 HTML 標簽，可以設置文字居中，字體顏色等樣色(HTML 語法)
代碼:
<div align="center" style="color:red">VS Code 使用 Markdown 編寫文檔</div>
演示:
2. 標題
注：# 后面保持空格（和使用 h1/h2 標簽功能類似）
代碼:
# h1
## h2
演示:
3. TOC(根據標題生成目錄)
代碼:
演示:
4. 引用
代碼1(單行式)：
> hello world!
演示：
代碼2(多行式)：
> hello world! 輸入完之后按兩次空格鍵再按一次Enter鍵即可
> hello world! 輸入完之后按兩次空格鍵再按一次Enter鍵即可
> hello world! 輸入完之后按兩次空格鍵再按一次Enter鍵即可
演示：
代碼3(多層嵌套)：
> aaaaaaaaa
>> bbbbbbbbb
>>> cccccccccc
演示：
5. 行內標記(用 ` 標記代碼塊將變成一行)
代碼：標記之外`hello world`標記之外
演示：
6. 代碼塊
1. 用```代碼```進行包裹
代碼：
```
<div>
<div></div>
<div></div>
<div></div>
</div>
```
演示：
2. 自定義語法（根據不同的語言配置不同的代碼着色）
代碼：
```javascript
var num = 0;
for (var i = 0; i < 5; i++) {
num+=i;
}
console.log(num);
```
演示：
7. 插入鏈接（待定。。。）
代碼：
[百度 1](http://www.baidu.com/ '百度一下')
演示：
8. 插入圖片
代碼:
8. 插入圖片帶有鏈接
代碼:
[](http://www.baidu.com)
9. 插入視頻
注：Markdown 語法是不支持直接插入視頻的
普遍的做法是 插入 HTML 的 iframe 框架，通過網站自帶的分享功能獲取，如果沒有可以嘗試第二種方法
第二是偽造播放界面，實質是插入視頻圖片，然后通過點擊跳轉到相關頁面
代碼：
<iframe height=498 width=510 src='http://player.youku.com/embed/XMjgzNzM0NTYxNg==' frameborder=0 'allowfullscreen'></iframe>
演示：
10. 序列
代碼1(有序)：
1. one
2. two
3. three
演示：
代碼2(無序)：
* one
* two
* three
演示：
代碼3(序表嵌套)：
1. one
1. one-1
2. two-2
2. two
* two-1
* two-2
演示：
代碼4(序表嵌套代碼塊)
注：換行+兩個Tab
* one
var a = 10; // 與上行保持空行並 遞進縮進
演示：
11. 任務列表(類似於多選框)
代碼：
- [ ] 選項一
- [x] 選項二
演示：
12. 表情(待定。。。。)
13. 表格
注： : 代表對齊方式
代碼1：
| a | b | c |
|:--:|:-- | --:| #這句代碼只能寫在第二行
| 居中 | 左對齊 | 右對齊 |
代碼2(簡約寫法)：
a | b | c
:---:|:------------ |--:
居中 | 左對齊 | 右對齊
代碼3(特殊表格)：使用HTML代碼
演示：
14. 支持內嵌CSS樣式
代碼：<p style="color: #AD5D0F;font-size: 30px; font-family: '宋體';">內聯樣式</p>
演示：
15. 語義標記
代碼：
*斜體*、_斜體_
**加粗**
***加粗+斜體***、**_加粗+斜體_**
~~刪除線~~
==背景色==
$\underline{下划線}$
Superscript - superscript
^superscript^
Subscript - subscript
~subscript~
演示：
16. 語義標簽
代碼：
<i>斜體</i>
<b>加粗</b>
<em>強調</em>
<u>下划線</u>
<del>刪除</del>
Z<sup>a</sup>
Z<sub>a</sub>
<kbd>Ctrl</kbd>
演示：
17. 公式
代碼：
$$ x \href{why-equal.html}{=} y^2 + 1 $$
$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $
演示：
18. 分隔符
代碼： --- 或者 ***
演示：
19. 腳注
代碼：
Markdown[^1]
[^1]: Markdown是一種純文本標記語言 // 在文章最后面顯示腳注
演示：
20. 錨點
代碼：
[公式標題錨點](#1)
#### [任務列表(類似於多選框)] {#1} // 方括號后保持空格
演示：
代碼部分：
連接部分：
點擊點擊跳到指定的標題：
21. 定義型列表
注：解釋型定義
代碼：
Markdown
: 輕量級文本標記語言，可以轉換成html，pdf等格式 // 開頭一個`:` + `Tab` 或 四個空格
演示：
24.自動郵箱鏈接
代碼：
<xxx@outlook.com>
演示：
25. 流程圖
代碼：
```
graph LR
A-->B
```
```
sequenceDiagram
A->>B: How are you?
B->>A: Great!
```
```
gantt
dateFormat YYYY-MM-DD
section S1
T1: 2014-01-01, 9d
section S2
T2: 2014-01-11, 9d
section S3
T3: 2014-01-02, 9d
```
演示：
26. 時序圖
代碼：
```sequence
A->>B: 你好
Note left of A: 我在左邊
Note right of B: 我在右邊
B-->A: 很高興認識你
```
```sequence
起床->吃飯: 稀飯油條
吃飯->上班: 不要遲到了
上班->午餐: 吃撐了
上班->下班:
Note right of 下班: 下班了
下班->回家:
Note right of 回家: 到家了
回家-->>起床:
Note left of 起床: 新的一天
```
演示：
