本章导航：
- 1. 介绍 MPE。
- 2. 简要介绍几个十分好用的 MPE 的功能。
使用电脑环境：Windows10。本章主要参考 MPE 官方中文文档。
3.1 Markdown Preview Enhanced 简介
在开始阅读 MPE（Markdown Preview Enhanced）的功能之前，您需要在 vscode 的应用商店搜索并安装 Markdown Preview Enhanced 插件。
在 MPE 的安装界面提供了十分详细的使用文档，且完美地支持中文。说明文档链接：Markdown Preview Enhanced 英文|中文。
Markdown Preview Enhanced 是一款为 Atom 以及 Visual Studio Code 编辑器编写的超级强大的 Markdown 插件。 这款插件意在让你拥有飘逸的 Markdown 写作体验。—— MPE 官方介绍。
使用 vscode 编写 .md 文件时，可以使用组合快捷键 Ctrl + K V 打开 MPE 的侧边预览，来实时的查看 markdown 的预览结果。
在 vscode 中支持放大镜功能：cmd + 放大，cmd - 缩小。辅助该放大镜功能，您将会获得不一样的体验。
3.2 MPE 基础语法
markdown 基础语法可查阅《2.1 Markdown 使用手册》。下面主要介绍 MPE 特有的几个语法。
3.2.1 代码显示行数与高亮
例3.1 只需要在代码的名称后面添加 {.line-numbers} 即可为代码添加行数：
```python {.line-numbers}
a = 1
b = 7
c = a + b
```
输出预览结果：
a = 1
b = 7
c = a + b
例3.2 在代码名称后添加 {highlight=[2-3, 10-14]} 这种形式，可以为指定代码提供高亮设置。如果需求仅仅是一个连续的行高亮，可以这样：
```python {highlight=2-4}
a = 1
b = 7
c = a + b
d = a ** c
e = a - d
```
3.2.2 任务列表
- [ ] 未完成
- [x] 已完成
3.2.3 上下标
| 符号 | 说明 | 示例 |
|---|---|---|
^^ |
上标 | 猫狗 |
~~ |
下标 | 狗猫 |
3.2.4 导入外部文件
语法：@import "你的文件" 或者
支持的文件类型
-
.jpeg(.jpg),.gif,.png,.apng,.svg,.bmp文件将会直接被当作 markdown 图片被引用。 -
.csv文件将会被转换成 markdown 表格。 -
.mermaid将会被 mermaid 渲染。 -
.dot文件将会被 viz.js (graphviz) 渲染。 -
.plantuml(.puml) 文件将会被 PlantUML 渲染。 -
.html将会直接被引入。 -
.js将会被引用为<script src="你的 js 文件"></script>。 -
.less和.css将会被引用为 style。目前 less 只支持本地文件。.css文件将会被引用为 <link rel="stylesheet" href="你的 css 文件">。 -
.pdf文件将会被 pdf2svg 转换为 svg 然后被引用。 - markdown 将会被分析处理然后被引用。
- 其他所有的文件都将被视为代码块。
例3.3：导入图片
@import "test.png" {width="300px" height="200px" title="图片的标题" alt="我的 alt"}
例3.4 引用文件作为 Code Chunk：
@import "test.py" {cmd="python3", class="line-numbers"}
例3.5 作为代码块：
@import "test.json" {as="vega-lite"}
当然可以插入 Markdown，这样很有意思。除了把多个小文档合并成一个大文档这种无脑的用法之外，我觉得最有潜力的用法是——非线性写作啊！
如果我们把一些小文件当作卡片的话，善用导入文件功能就可以实现类似 Scrivener 的功能了。虽然用户体验上相差甚远，但是免费啊。
3.2.5 导入目录
在 vscode 中，只需要在需要生成目录的地方放入 [TOC] 便会自动生成目录。对于 [TOC] 不生效的情况，可以使用 `` 代替其自动生成目录。
3.2.6 使用表情符号 与 Front Icon
通过键入 :EMOJICODE: 可在您的写作中添加表情符号。
@octocat :+1: 这个 PR 看起来很棒 - 可以合并了！ :shipit:
键入 : 将显示建议的表情符号列表。 列表将在您键入时进行过滤，因此一旦找到所需表情符号，请按 Tab 或 Enter 键以填写选中的结果。
有关可用表情符号和代码的完整列表，请查看 emoji-cheat-sheet.com。您也可以参考 Font Awesome 设置 Front Icon。
3.3 在文档里面跑代码
为了令 MPE 可以运行代码（Code Chunk），您需要在 vscode 的设置里搜索 MPE，找到 Markdown-preview-enhanced: Enable Script Execution 在其前复选框✔，以开启 Code Chunk。开启之后，您便可以直接在 markdown 中运行代码了。
使用快捷键 ctrl + shift + P 打开 MPE 运行代码的提示框：
需要在代码名称的后面添加，类似下面的命令：
```python {cmd=true, class="line-numbers"}
print(2*4)
```
下面可以看一个示例图：
cmd=true 是默认您的 vscode 可以自动识别 Python 环境的。，如果您需要指定特殊的环境可以像 cmd="/usr/local/bin/python3" 这样设置。
3.4 画图
图3.4 使用 Mermaid 画了一个类图：
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 相关的使用语法，可以👓Mermaid 学习。
更多与画图相关的内容可以参阅 MPE：图像。
3.5 小结
本章主要讨论了 MPE 的一些常用语法。
