本章導(dǎo)航：
- 1. 介紹 MPE噩茄。
- 2. 簡(jiǎn)要介紹幾個(gè)十分好用的 MPE 的功能账蓉。
使用電腦環(huán)境：Windows10皮璧。本章主要參考 MPE 官方中文文檔疑俭。
3.1 Markdown Preview Enhanced 簡(jiǎn)介
在開始閱讀 MPE（Markdown Preview Enhanced）的功能之前，您需要在 vscode 的應(yīng)用商店搜索并安裝 Markdown Preview Enhanced 插件伍玖。
在 MPE 的安裝界面提供了十分詳細(xì)的使用文檔嫩痰，且完美地支持中文。說(shuō)明文檔鏈接：Markdown Preview Enhanced 英文|中文窍箍。
Markdown Preview Enhanced 是一款為 Atom 以及 Visual Studio Code 編輯器編寫的超級(jí)強(qiáng)大的 Markdown 插件串纺。 這款插件意在讓你擁有飄逸的 Markdown 寫作體驗(yàn)∫—— MPE 官方介紹纺棺。
使用 vscode 編寫 .md 文件時(shí)，可以使用組合快捷鍵 Ctrl + K V 打開 MPE 的側(cè)邊預(yù)覽邪狞，來(lái)實(shí)時(shí)的查看 markdown 的預(yù)覽結(jié)果祷蝌。
在 vscode 中支持放大鏡功能：cmd + 放大，cmd - 縮小外恕。輔助該放大鏡功能杆逗，您將會(huì)獲得不一樣的體驗(yàn)。
3.2 MPE 基礎(chǔ)語(yǔ)法
markdown 基礎(chǔ)語(yǔ)法可查閱《2.1 Markdown 使用手冊(cè)》鳞疲。下面主要介紹 MPE 特有的幾個(gè)語(yǔ)法罪郊。
3.2.1 代碼顯示行數(shù)與高亮
例3.1 只需要在代碼的名稱后面添加 {.line-numbers} 即可為代碼添加行數(shù)：
```python {.line-numbers}
a = 1
b = 7
c = a + b
```
輸出預(yù)覽結(jié)果：
a = 1
b = 7
c = a + b
例3.2 在代碼名稱后添加 {highlight=[2-3, 10-14]} 這種形式，可以為指定代碼提供高亮設(shè)置尚洽。如果需求僅僅是一個(gè)連續(xù)的行高亮悔橄，可以這樣：
```python {highlight=2-4}
a = 1
b = 7
c = a + b
d = a ** c
e = a - d
```
3.2.2 任務(wù)列表
- [ ] 未完成
- [x] 已完成
3.2.3 上下標(biāo)
| 符號(hào) | 說(shuō)明 | 示例 |
|---|---|---|
^^ |
上標(biāo) | 貓狗 |
~~ |
下標(biāo) | 狗貓 |
3.2.4 導(dǎo)入外部文件
語(yǔ)法：@import "你的文件" 或者
支持的文件類型
-
.jpeg(.jpg),.gif,.png,.apng,.svg,.bmp文件將會(huì)直接被當(dāng)作 markdown 圖片被引用。 -
.csv文件將會(huì)被轉(zhuǎn)換成 markdown 表格腺毫。 -
.mermaid將會(huì)被 mermaid 渲染癣疟。 -
.dot文件將會(huì)被 viz.js (graphviz) 渲染。 -
.plantuml(.puml) 文件將會(huì)被 PlantUML 渲染潮酒。 -
.html將會(huì)直接被引入睛挚。 -
.js將會(huì)被引用為<script src="你的 js 文件"></script>。 -
.less和.css將會(huì)被引用為 style急黎。目前 less 只支持本地文件扎狱。.css文件將會(huì)被引用為 <link rel="stylesheet" href="你的 css 文件">。 -
.pdf文件將會(huì)被 pdf2svg 轉(zhuǎn)換為 svg 然后被引用勃教。 - markdown 將會(huì)被分析處理然后被引用淤击。
- 其他所有的文件都將被視為代碼塊。
例3.3：導(dǎo)入圖片
@import "test.png" {width="300px" height="200px" title="圖片的標(biāo)題" alt="我的 alt"}
例3.4 引用文件作為 Code Chunk：
@import "test.py" {cmd="python3", class="line-numbers"}
例3.5 作為代碼塊：
@import "test.json" {as="vega-lite"}
當(dāng)然可以插入 Markdown故源，這樣很有意思污抬。除了把多個(gè)小文檔合并成一個(gè)大文檔這種無(wú)腦的用法之外，我覺(jué)得最有潛力的用法是——非線性寫作吧印机！
如果我們把一些小文件當(dāng)作卡片的話矢腻，善用導(dǎo)入文件功能就可以實(shí)現(xiàn)類似 Scrivener 的功能了。雖然用戶體驗(yàn)上相差甚遠(yuǎn)耳贬，但是免費(fèi)啊踏堡。
3.2.5 導(dǎo)入目錄
在 vscode 中，只需要在需要生成目錄的地方放入 [TOC] 便會(huì)自動(dòng)生成目錄咒劲。對(duì)于 [TOC] 不生效的情況顷蟆，可以使用 `` 代替其自動(dòng)生成目錄渺氧。
3.2.6 使用表情符號(hào) 與 Front Icon
參考：GitHub Help：Emoji藤违。
通過(guò)鍵入 :EMOJICODE: 可在您的寫作中添加表情符號(hào)。
@octocat :+1: 這個(gè) PR 看起來(lái)很棒 - 可以合并了御雕！ :shipit:
鍵入 : 將顯示建議的表情符號(hào)列表蛔屹。 列表將在您鍵入時(shí)進(jìn)行過(guò)濾削樊，因此一旦找到所需表情符號(hào)，請(qǐng)按 Tab 或 Enter 鍵以填寫選中的結(jié)果兔毒。
有關(guān)可用表情符號(hào)和代碼的完整列表漫贞，請(qǐng)查看 emoji-cheat-sheet.com。您也可以參考 Font Awesome 設(shè)置 Front Icon育叁。
3.3 在文檔里面跑代碼
為了令 MPE 可以運(yùn)行代碼（Code Chunk）迅脐，您需要在 vscode 的設(shè)置里搜索 MPE，找到 Markdown-preview-enhanced: Enable Script Execution 在其前復(fù)選框?豪嗽，以開啟 Code Chunk谴蔑。開啟之后，您便可以直接在 markdown 中運(yùn)行代碼了龟梦。
使用快捷鍵 ctrl + shift + P 打開 MPE 運(yùn)行代碼的提示框：
需要在代碼名稱的后面添加隐锭，類似下面的命令：
```python {cmd=true, class="line-numbers"}
print(2*4)
```
下面可以看一個(gè)示例圖：
cmd=true 是默認(rèn)您的 vscode 可以自動(dòng)識(shí)別 Python 環(huán)境的。计贰，如果您需要指定特殊的環(huán)境可以像 cmd="/usr/local/bin/python3" 這樣設(shè)置钦睡。
3.4 畫圖
圖3.4 使用 Mermaid 畫了一個(gè)類圖：
classDiagram
類別1 <|-- AveryLongClass : Cool
類別3 *-- 類別4
類別5 o-- 類別6
類別7 .. 類別8
類別9 --> 類別2 : Where am i?
類別9 --* 類別3
類別9 --|> 類別7
類別7 : equals()
類別7 : Object[] elementData
類別1 : size()
類別1 : int chimp
類別1 : int gorilla
類別8 <--> 類別2: Cool label
更多與 Mermaid 相關(guān)的使用語(yǔ)法，可以??Mermaid 學(xué)習(xí)躁倒。
更多與畫圖相關(guān)的內(nèi)容可以參閱 MPE：圖像赎婚。
3.5 小結(jié)
本章主要討論了 MPE 的一些常用語(yǔ)法。
