[诸神缄默不语-个人技术博文与视频目录](https://blog.csdn.net/PolarisRisingWar/article/details/116396744)

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

本文就不介绍VSCode的安装和使用了，如果感兴趣可以查看我之前写的教程：[VSCode编程小技巧集锦（持续更新ing...）](https://blog.csdn.net/PolarisRisingWar/article/details/124070128)  
我以后估计会更新一版更全面、易读的。

[TOC]

# 1. 插件安装
直接在插件市场中搜索并下载这个插件即可：  
![MPE插件](https://developer.qcloudimg.com/http-save/yehe-5595269/a24c3c0d3db554c435fe4d4d4f90bccd.webp)

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

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

用MPE插件则是在markdown文件的编辑窗口中点击鼠标右键选择`Markdown Preview Enhanced: Open Preview to the Side`：  
![右键选择](https://developer.qcloudimg.com/http-save/yehe-5595269/beceffbf729a03af0af3dd020630d7e9.png)

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

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

# 3. 转换markdown文件
在预览界面右键选择export，根据具体的格式来做判断：  
![export](https://developer.qcloudimg.com/http-save/yehe-5595269/c3fe5f0cabe5d0590b4c65a89dbcbeb9.webp)

这里的pandoc是需要先安装pandoc软件，然后在markdown文件最前面填写front-matter。pandoc软件的下载、安装教程可以参考我之前撰写的另一篇博文：[如何安装pandoc并实现将Markdown文档转换为Word文档](https://blog.csdn.net/PolarisRisingWar/article/details/157472468)

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

（电子书ebook格式因为我目前没有用到的需求，我就不写了）
## 1. 导出HTML格式
选择所需的模式，直接导出即可：  
![html](https://developer.qcloudimg.com/http-save/yehe-5595269/0637a79462a3f693976c97bce9ee6e45.png)

offline和CDN hosted主要区别就在挂载CSS插件的路径：
![offline和CDN hosted compare](https://developer.qcloudimg.com/http-save/yehe-5595269/81ed414bab6e4e2e86e985c18df1fa30.webp)

简单来说就是如果你想要渲染网页的设备不方便用公网，那就用offline模式。否则都行。
## 2. 导出PDF格式
**方法一：**
通过 Chrome (Puppeteer) - PDF（需要先安装chrome浏览器）：（建议）  
![chrome-pdf](https://developer.qcloudimg.com/http-save/yehe-5595269/0c26c1ba61d3e8f62399816324094312.png)

**方法二：**
通过 PDF (Prince)：（不建议，因为渲染效果跟VSCode中的不太一致）
需要先安装[prince](https://www.princexml.com/)（这是个做html转PDF的软件，个人使用免费）

![欢迎页](https://developer.qcloudimg.com/http-save/yehe-5595269/28d71a597133d04fce87e19557f35549.webp)

![接受许可证](https://developer.qcloudimg.com/http-save/yehe-5595269/be78b707cfcaf94bf785c84f049d287b.png)

![选择安装路径](https://developer.qcloudimg.com/http-save/yehe-5595269/1dc60150fb5021c6a1990d134f4a53e3.webp)

点击确定，等待安装完成：  
![安装完成](https://developer.qcloudimg.com/http-save/yehe-5595269/a8fdcb084734931eaccca79d407cd413.webp)

如果电脑中没有安装\.net framework 3.5，会弹窗：  
![弹窗](https://developer.qcloudimg.com/http-save/yehe-5595269/24acc515621340657040107c08bebc03.webp)

如果点击下载并安装此功能出现安装失败（具体的错误代码可能不一致）：  
![0x800F0950](https://developer.qcloudimg.com/http-save/yehe-5595269/76a975c2485caca60daa9cfdf601acfa.webp)

可能是因为1. 网络问题，建议使用手机热点而非学校/公司的网络。国内网络是可以直连的，就是要慢点。2. 禁止了Windows系统更新。是的这软件需要保持在系统更新里面找安装包，不知道是什么神人发明的机制。  
.NET framework安装成功后的效果：  
![安装成功](https://developer.qcloudimg.com/http-save/yehe-5595269/91106c7fd3dce1886d280b7cf23be2d6.webp)

然后你现在就可以正常打开prince软件了：  
![prince软件界面](https://developer.qcloudimg.com/http-save/yehe-5595269/4dcdf6f64d55519c30e410d8b5ab3dcf.webp)

然后将prince软件放到系统变量路径中：
1. 复制安装路径中prince.exe所在bin的文件夹路径（我的是`D:\all_applications\forPrince\prince20260517\engine\bin`了）
2. 在电脑设置中搜索“环境变量”，打开“编辑系统环境变量”  
![环境变量](https://developer.qcloudimg.com/http-save/yehe-5595269/8f50f522b3a35bc60429fe2c38a62913.webp)  
![path](https://developer.qcloudimg.com/http-save/yehe-5595269/1f5a91a43a2074cbea590630cc2d0a51.webp)  
将prince.exe的路径添加进来：  
![添加路径](https://developer.qcloudimg.com/http-save/yehe-5595269/a5bfa5508a57b88fba124370f8abc368.png)
3. 重新打开VSCode，再在MPE预览界面中选择：  
![导出pdf(prince)](https://developer.qcloudimg.com/http-save/yehe-5595269/9b8be00ecc1a81524c9e4a4a2e9549ed.png)

**方法三：**  
通过pandoc导出PDF版：（不建议，因为渲染效果跟VSCode中的不太一致）  
在markdown文件最开头加上如下front matter然后在MPE浏览页面中右键选择Export - Pandoc：
```yaml
---
title: "MPE插件"
output:
  pdf_document:
    latex_engine: xelatex
CJKmainfont: Microsoft YaHei
---
```
这里的title就是文件名。

![导出pandoc](https://developer.qcloudimg.com/http-save/yehe-5595269/b83b85ade7fa96353a915de0e6a7f017.webp)

pandoc导出PDF实际上用的是latex引擎。默认用的是pdflatex，对CJK字体支持不好。如果你的markdown内容是纯英文的倒是可以直接：
```yaml
---
title: "MPE插件"
output: pdf_document
---
```
但是如果直接这么运行的话会报错，因为pdflatex对中文支持不好：
```
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官方文档：<https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/pandoc-pdf>

## 3. 导出图片格式（PNG/JPEG）
都在Chrome (Puppeteer) 中：  
![导出图片](https://developer.qcloudimg.com/http-save/yehe-5595269/737b1066c7ccce228f74643b9ca0e9e3.png)

## 4. 导出Word格式
需要先在想要转换的Markdown文档最前面加上如下front matter：
```yaml
---
title: "如何安装pandoc并实现将Markdown文档转换为Word文档"
output: word_document
---
```
然后在MPE浏览页面中右键选择Export - Pandoc：

![导出pandoc](https://developer.qcloudimg.com/http-save/yehe-5595269/b83b85ade7fa96353a915de0e6a7f017.webp)

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

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

本文介绍了在VSCode中使用MPE插件处理Markdown文件的方法。主要内容包括：1）MPE插件的安装；2）查看Markdown渲染效果的两种方式（内置快捷键和MPE右键预览）；3）Markdown文件转换功能，详细讲解了导出HTML（离线/在线模式）、PDF（Chrome/Prince/Pandoc三种方式）和Word的操作步骤及注意事项。文章还提供了相关软件的安装指南和常见问题解决方案，帮

程序开发工程师

开发工具

本文详细讲解在VSCode中使用MPE插件高效查看、渲染及转换Markdown文件的方法，涵盖安装步骤、快捷键操作，并重点介绍导出HTML、PDF、图片及Word格式的实用技巧，解决中文PDF导出及pandoc配置难题，提升文档处理效率。

代码解释

Markdown

Windows

GitHub

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

如何在VSCode中查看、转换markdown文件：使用MPE（Markdown Previe Enhanced）插件-腾讯云开发者社区-腾讯云

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

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐