论文与PPT神器：Markdown Viewer

1 什么是 Markdown Viewer

它是一个 Chrome 浏览器插件，也支持 Edge 浏览器。它的作用是，让浏览器可以直接打开 .md 文件，也就是 Markdown 文件。

作者是响马，老一辈的同学们应该都听说过他，承载着我们一代人青春回忆的西祠胡同，就是他用 ASP 写的。

它支持复杂数学公式 KateX，也支持多种图表类自定义语法：Mermaid、Vega-Lite、DOT、Infographic，极大地拓展了 Markdown 文件的图表编辑展示能力，并能一键导出为 docx。

注意：无论是 KateX ，还是 Mermaid、Vega-Lite、DOT、Infographic，主流的 AI 工具都支持它们的预定义格式。经常使用 AI 的小伙伴们一定会发现，AI 生成的公式或图表类的纯文本很难直接使用。 Markdown Viewer 则提供了这个桥梁：AI 负责吐出特定格式的 Markdown 文本； Markdown Viewer 负责将它们渲染成公式和图表，并转成 docx。

2 安装与配置

1、下载离线安装包： Markdown Viewer 1.3.0，并解压缩到文件夹

2、打开 Chrome 或 Edge 浏览器，地址栏输入： chrome://extensions ，回车打开“扩展程序”页面（Chrome）或“扩展”页面（Edge）。

3、打开“开发者模式”（右上角，Chrome）或“开发人员模式”（左侧，Edge）

4、点击“加载未打包的扩展程序”（Chrome）或“加载解压缩的扩展”（Edge），选择第 1 步解压缩的插件文件夹，即可完成安装。

5、在 Chrome 或 Edge 浏览器的右上角找到“插件”图标，点击后看到 Markdown Viewer 插件，点击右侧三个点，点击“管理扩展程序”，找到“允许访问文件网址”，确保该选项处于启用状态。

好，经过上述步骤，已经完成 Markdown Viewer 的安装与配置。

3 使用

Markdown Viewer 的使用并不是非常“直观”，所以需要做一些额外说明。

3.1 浏览器打开 Markdown

这个很简单，如果你有现成的 Markdown 文件（.md），直接将它拖动到浏览器界面上即可打开，并按照标准 Markdown 格式进行渲染。右上角有一个“下载”图标，点击即可直接导出为 docx。

3.2 编辑公式与图表

查看此文档：Markdown Viewer Extension 渲染效果测试，这个文档本身就是一个 md 文件。查看源代码，就可以了解 Markdown 语法了。找到数学公式的位置，即可看到单行公式和块级公式的表达，分别是包含在一对 $ 符号和 $$ 符号之间的。

图表的完整演示：

Mermaid 图表：Mermaid 完整演示

Vega-Lite 图表：Vega-Lite 完整演示

DOT 图表：DOT 完整演示

Infographic 图表：Infographic 完整演示

对于前三种图表，演示文档中已经包含了所有的示例，直接查看源文件即可依葫芦画瓢，编辑自己的 md 文件，并用浏览器打开、导出成 docx 即可使用。

Infographic 是阿里推出的一整套视觉系统，它包含模板语法、图标、插画三个部分，用好它需要更多的说明。

3.3 Infographic 详细说明

3.3.1 粘贴代码块

首先，访问 https://infographic.antv.vision/gallery/ 即可查看全部的模板，并选择你喜欢的模板，点击它进入模板示例页面。

复制模板右侧的全部文本，并将它们粘贴到你自己的 md 文件中，注意，在代码段前后加上 Markdown Viewer 插件约定的一对标签中：

```infographic
这里插入 Infographic 代码
```

保存 md 文件，用浏览器打开，就可以看到与示例模板完全一致的效果。

3.3.2 自定义代码块

接下来我们需要对代码进行自定义。可以看到复制的 infographic 代码块通常带有几个预定义设置：

title
time
value
desc
icon
illus

其中，前面几个不难理解，只需简单实践一下，结合渲染结果就知道它们对应的是哪些图表内容。有一些如果没有包含在渲染结果中，说明是冗余项，比如 time ，在某些模板中就没有被渲染。

但让人困惑的其中之一是 icon。很容易发现，不同的模板中使用了大量的 icon ，它们有不同的值：

mingcute/diamond-2-fill
mingcute/wallet-4-line
mingcute/happy-line

这些是什么？如果我想要换一个图标，我怎么知道它叫什么名字呢？很显然，这里的 icon 的命名有一个预设的体系，其实它们都在这里 https://icon-sets.iconify.design/ 被定义。

当我们想要找一个图标时，打开 https://icon-sets.iconify.design/ ，用英文（还不支持中文）在右上角搜索你想要的图标含义即可，这里提供了海量的图标。找到心仪的图标后，点击它，然后在下方可以看到 Icon name。注意，它默认可能是这样的格式：

mingcute:jump-fill

需要改成这样：

mingcute/jump-fill

将它 copy 到你的 md 文件中，即可使用这个图标了。

另一个让人困惑的是 illus。这是一个插图体系，但还很不完备，阿里的 infographic 确实在模板中使用了一些 illus，但很少，也没有提供一个完整的库。我的建议是，暂时不用管它，如果你的图表需要用到插图，建议从其他渠道获得，并手动插入进去。