MPE 是什么?按照它自己的描述:
Markdown Preview Enhanced 是一款为 Atom 以及 Visual Studio Code 编辑器编写的超级强大的 Markdown 插件。 这款插件意在让你拥有飘逸的 Markdown 写作体验。
根据我的使用经验,它没有自吹自擂。这里是它的文档,中文的哦。
MPE 的功能过于丰富因此我不想把他们全列出来,对我而言有用、我想安利的功能主要有:
- 目录
- 批注
- 合并单元格
- 插入 LaTeX 公式
- 用纯文本绘图
- 运行代码
- 导入和导出
- 制作幻灯片
下面我们分类介绍。在此之前我们先要知道按 Ctrl+K, V 可以叫出功能强大的 MPE 预览窗口。
6. 对Markdown语法的增强
首先就是目录,对于长文档来说,目录很有必要。
在 MPE 里最简单的插入目录的方法就是在单独的行里使用 [TOC] 标记。这会在当前位置立即插入一个目录。
但是我经常喜欢另一种方式,在要插入目录的地方加这么一行:
<!-- @import "[TOC]" {cmd="toc" depthFrom=2 depthTo=3 orderedList=false} -->
第二种方式会直接将生成目录的 Markdown 文本插入到文中,就像这样:

看,编号还有bug呢
这样即使在不支持 [TOC] 标记的编辑器里也可以查看目录。不过另一方面,使用 [TOC] 标记更简单,而且现在支持 [TOC] 标记的环境越来越多。而且在 Markdown 里插 HTML 注释比较难看。所以这是个见仁见智的事情。
注意不管是哪种方法都有办法设定显示在目录里的标题级别。比如可以忽略四级以下的标题,或者忽略一级标题——因为一级标题应该被用来写文档标题。
其次是批注。MPE 支持用 == 来高亮一段文字。

文字高亮可以有效提升阅读体验。尤其是对于中文来说,粗体和斜体都不是很显眼,高亮是很实用的。
不仅如此,MPE 还支持 CriticMarkup 进行更复杂的批注:

你可能觉得有了版本控制就不再需要批注。但我觉得批注有助于我们看清一个东西在不同时间段是什么样子、怎么变成了现在的样子,是很有用的。有一些信息不应该被隐藏在历史提交里,而应该让所有人很清楚地查到。
第三是单元格合并。这一点没有想象中有用,但偶尔还是会用到的。

最后关于上下标、Emoji啥的就请大家自己尝试了。

7. 一些让文档变得优雅的工具
MPE 内嵌了很多工具,可以将策划从尴尬的p图工作中解放出来(投入尴尬的编程工作的怀抱)。
首先是用 LaTeX 写数学公式。LaTeX 这个东西我腹诽(不,我是明着骂)的地方非常多,但唯有写数学公式我是很欣赏的。

例子是 MPE 文档给的,我懒得编了。
咦?但是现在我可以不在 LaTeX 环境下写公式了,是不是可以更加肆无忌惮喷 LaTeX 了?
其次就是可以用代码描述一些常用的图表,比如流程图、时序图等等,也支持 Vega 的数学图表(但支持相当有限)。对我来说最有用的反而是大多数人可能不会用到的 ditta。

用 ditta 绘制一个简单界面

用 ditta 绘制武器斩味(嗯???)
ditta 是一个用字符描述图形的语言,而且是真正的『所见即所得』——你看到的字符怎么摆放,画出来的图形就是什么样的。看上去像是个玩具。但我觉得这个才是和 Markdown 『易写易读』气质最相符的工具。
ditta 很适合在文档里插一张简单的图画,描述一个简单的画面结构,讲清楚自己的想法。大多数情况下我们的文档里需要的就是这样的简图,而不是特别精美的成品图(因为它们永远活在需求里)。从此,我想画一张图就不需要打开图像编辑器画一张几十k的图片,只需要几十几百个字符、直接写在文档里。然后还有诸如『纯文本、易于版本控制』等等一系列的好处我就不赘述了。
ditta 是我非常非常喜欢并推崇的工具,强烈推荐给喜欢纯文本写文档的大家。
如果代码没有被执行,没有画出图的话,请
Ctrl+Shift+P然后执行 Markdown Preview Enhanced: Run Code Chunk。
8. 在文档里跑代码
被三个单撇号(键盘左上角那个键)包裹的文本块会被认为是代码,这和 Github 的习惯是一致的。(注意!这和 Markdown 原始的规则是不同的。)在单撇号后面加上语言的名字就可以享受到对应语言的语法高亮。

可以看到和前面那些绘图的语句原理是一样的(请对比一下前面的 ditta)。不同点在于前面的绘图代码可以被执行,而我们自己写的这些代码默认是不能执行的。毕竟随便运行代码是很危险的(尤其是代码块还可以被隐藏,十分危险)。如果要运行自己写的语句的话,需要手动打开设置:

然后,既然可以跑代码了,那……就已经没有什么可怕的了。
首先,在策划文档里随时跑一跑数值有助于减轻策划的睿智程度。

这个伤害公式本身没有问题,是有用武之地的。但睿智的策划会在所有的地方都用这个公式。
把代码隐藏可以得到更好的文档效果:

只要改代码里的参数,就可以直接在文档中显示结果。是不是很棒?
更妙的是代码的输出不仅仅可以是文本,还可以是 HTML 甚至 Markdown。
HTML 输出就是把输出的内容直接插入到 Markdown 生成的 HTML 里,无缝成为文档的一部分:

Markdown 输出则是将输出的内容当作 Markdown 源代码的一部分。这意味着我们获得了自由度极高的动态 Markdown。

更更妙的是代码可以分多块书写,然后按照一定的顺序顺次执行。这就使得各种测试调整变得稍微容易了一些。

9. 导入和导出
MPE 可以简单地把其他文件导入到当前文档中,语法是:
@import "你的文件"
简单明了,鼓掌!
这个东西的实用之处在于:
- 直接插入图片——不需要之前那么复杂的语法
- 插入很长的代码——代码外链是个好习惯
- 插入其他 Markdown
插入图片就不说了。插入代码会让文档变得清爽许多:

test.lua 是个200多行的大文件,全写在文档内难以接受。
插入 Markdown 很有意思。除了把多个小文档合并成一个大文档这种无脑的用法之外,我觉得最有潜力的用法是——非线性写作啊!


如果我们把一些小文件当作卡片的话,善用导入文件功能就可以实现类似 Scrivener 的功能了。虽然用户体验上相差甚远,但是免费啊。
导出文件比导入文件还好理解:
- 首先在预览窗口里右键,选择 Open in Browser
- 在浏览器里打印为 PDF……
- ……完成
你可能会说:我的老板需要我给他一个 doc 格式的文档。嗯,如果你不是正在申请著作权的话,你的老板非要用 doc 而不是 pdf 文档基本上只有一种可能——他想背着你修改你的文档。你应该辱骂他。
如果你不想辱骂他的话,MPE 也是可以导出 doc 文档的,这个请查阅 MPE 的文档吧,因为我没尝试过所以就不举例子了。
10. 幻灯片
到上面为止,对我个人而言已经足以应付日常的文档工作了。
但是还有一种情况,就是要把自己的想法展示给别人。虽然我是觉得打开 A4 大小的 pdf 直接给人讲也不错,不过如果搞个幻灯片不是更让人开心嘛。
非常好笑的是 MPE 还支持用 Markdown (当然是增强版的)写幻灯片。
我觉得比起『真厉害』,这个功能更倾向于好笑啊哈哈哈哈哈哈哈哈哈
可以先看看这个例子感受一下制作出来的幻灯片之强大:
- MPE 支持的绝大部分功能都能用于幻灯片
- 横向/纵向切换幻灯片
- 演讲者视图和注释(厉害厉害)
- 全局预览
- 动画
- 非常自由和比较方便的主题设置
这个幻灯片的源代码在这里,可以感受一下,还是很有趣的。

功能全面,不得不服
以前上学的时候,我的一个老师曾经说过:幻灯片不需要那些花里胡哨的效果、那么多颜色、那么多动画,重要的是将内容表达清楚。单色背景+清晰的文字,远比图片+动画表达的效率要高。我当时听了如醍醐灌顶。
后来过了几年我发现——这就是你们赚钱不如隔壁美院轻松的原因啊!
……不说这个了,对于不是给外人看的幻灯片,用 MPE 写还是有很多优点的:
- 拿自己写好的文档稍微改改分页就能生成幻灯片
- 专注于内容,而不是表现
- 非要表现的话也完全达到了一般人用 PowerPoint 能做出来的水平。
但是客观的说,这个幻灯片做出来也就是给自己人用的。如果要做给外人看的幻灯片,还是拜托有审美的同事帮忙好好做一个吧。
X 总结一下
这篇文章是想给有写文档需求的人安利一些好的工具。我觉得软件,尤其是游戏的策划都应该有一些程序基础,在有一些程序基础的前提下 Markdown 是非常方便的文档工具,MPE 更可以让文档工作变得更有乐趣。
回顾下这篇文章的主要内容:
- 用 Markdown + Git 写文档真是爽
- MPE 功能很强大,请吃安利
- 用 ditta 画简图轻松愉悦
- 在文档里插入代码,随时验证自己的想法
- 小型黑科技:制作动态Markdown
- 小型黑科技:使用导入文件功能进行非线性写作
- 小型黑科技:用 Markdown 写幻灯片
这样 Office 三件套里有两个可以纯文本解决了。Excel…目前真不行……