如何在VSCode中查看、转换markdown文件：使用MPE（Markdown Previe Enhanced）插件

诸神缄默不语-个人技术博文与视频目录

本文主要关注在VSCode中，用MPE插件来查看、转换markdown文件的方法。

本文就不介绍VSCode的安装和使用了，如果感兴趣可以查看我之前写的教程：VSCode编程小技巧集锦（持续更新ing...）

我以后估计会更新一版更全面、易读的。

1. 插件安装

直接在插件市场中搜索并下载这个插件即可：

下载好后就能直接使用了。

2. 查看markdown文件的渲染效果

VSCode内置的查看markdown文件的快捷键是Ctrl + K + V，但是效果要差一点，比如不能渲染[TOC]，必须要空两格+回车才能渲染换段回车，以及排版会长得丑一点。

用MPE插件则是在markdown文件的编辑窗口中点击鼠标右键选择Markdown Preview Enhanced: Open Preview to the Side：

效果都是直接在右边开一个新的分页，展示markdown文件渲染效果。

有一点可以注意一下，就是Trae编辑器对MPE的插件支持可能有点问题，所以会打开渲染的预览界面，都是不会直接自动开启右边的分页，只需要把那个预览界面的标签页直接拖到右边，等分页的预览打开以后再松手，就也可以分页了。

3. 转换markdown文件

在预览界面右键选择export，根据具体的格式来做判断：

这里的pandoc是需要先安装pandoc软件，然后在markdown文件最前面填写front-matter。pandoc软件的下载、安装教程可以参考我之前撰写的另一篇博文：如何安装pandoc并实现将Markdown文档转换为Word文档

都是默认导出到markdown文件同级目录下，与markdown文件同名。pandoc会设置文件名（也能设置更多参数，本文没有详写）。

（电子书ebook格式因为我目前没有用到的需求，我就不写了）

1. 导出HTML格式

选择所需的模式，直接导出即可：

offline和CDN hosted主要区别就在挂载CSS插件的路径：

简单来说就是如果你想要渲染网页的设备不方便用公网，那就用offline模式。否则都行。

2. 导出PDF格式

方法一： 通过 Chrome (Puppeteer) - PDF（需要先安装chrome浏览器）：（建议）

方法二： 通过 PDF (Prince)：（不建议，因为渲染效果跟VSCode中的不太一致）需要先安装prince（这是个做html转PDF的软件，个人使用免费） Windows 64字节安装包（16.2版）：

makefile 复制代码

我用夸克网盘给你分享了「prince-16.2-win64.msi」，点击链接或复制整段内容，打开「夸克APP」即可获取。
/~932b3Ybtoe~:/
链接：https://pan.quark.cn/s/a863ffdcc7d6
提取码：xKMA

点击确定，等待安装完成：

如果电脑中没有安装.net framework 3.5，会弹窗：

如果点击下载并安装此功能出现安装失败（具体的错误代码可能不一致）：

可能是因为1. 网络问题，建议使用手机热点而非学校/公司的网络。国内网络是可以直连的，就是要慢点。2. 禁止了Windows系统更新。是的这软件需要保持在系统更新里面找安装包，不知道是什么神人发明的机制。

.NET framework安装成功后的效果：

然后你现在就可以正常打开prince软件了：

然后将prince软件放到系统变量路径中：

复制安装路径中prince.exe所在bin的文件夹路径（我的是D:\all_applications\forPrince\prince20260517\engine\bin了）
在电脑设置中搜索"环境变量"，打开"编辑系统环境变量"

将prince.exe的路径添加进来：
重新打开VSCode，再在MPE预览界面中选择：

方法三：

通过pandoc导出PDF版：（不建议，因为渲染效果跟VSCode中的不太一致）

在markdown文件最开头加上如下front matter然后在MPE浏览页面中右键选择Export - Pandoc：

yaml 复制代码

---
title: "MPE插件"
output:
  pdf_document:
    latex_engine: xelatex
CJKmainfont: Microsoft YaHei
---

这里的title就是文件名。

pandoc导出PDF实际上用的是latex引擎。默认用的是pdflatex，对CJK字体支持不好。如果你的markdown内容是纯英文的倒是可以直接：

yaml 复制代码

---
title: "MPE插件"
output: pdf_document
---

但是如果直接这么运行的话会报错，因为pdflatex对中文支持不好：

vbnet 复制代码

Error: Command failed: pandoc -f markdown+tex_math_single_backslash -o d:main.pdf --pdf-engine=pdflatex
Error producing PDF.
! LaTeX Error: Unicode character 插 (U+63D2)
               not set up for use with LaTeX.

See the LaTeX manual or LaTeX Companion for explanation.
Type  H <return>  for immediate help.
 ...                                              
                                                  
l.71

所以可以直接改成用XeLaTeX。中文字体也需要设置，我这里设置的是微软雅黑，你也可以根据实际需求改成别的字体。

参考MPE官方文档：shd101wyy.github.io/markdown-pr...

3. 导出图片格式（PNG/JPEG）

都在Chrome (Puppeteer) 中：

4. 导出Word格式

需要先在想要转换的Markdown文档最前面加上如下front matter：

yaml 复制代码

---
title: "如何安装pandoc并实现将Markdown文档转换为Word文档"
output: word_document
---

然后在MPE浏览页面中右键选择Export - Pandoc：