如何在VSCode中查看、转换markdown文件:使用MPE(Markdown Previe Enhanced)插件

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

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

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

本文就不介绍VSCode的安装和使用了,如果感兴趣可以查看我之前写的教程:VSCode编程小技巧集锦(持续更新ing...)
我以后估计会更新一版更全面、易读的。

1. 插件安装

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

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

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

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

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

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

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

3. 转换markdown文件

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

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

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

(电子书ebook格式因为我目前没有用到的需求,我就不写了)

1. 导出HTML格式

选择所需的模式,直接导出即可:
html

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

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

2. 导出PDF格式

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

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

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

欢迎页

接受许可证

选择安装路径

点击确定,等待安装完成:
安装完成

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

如果点击下载并安装此功能出现安装失败(具体的错误代码可能不一致):
0x800F0950

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

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

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

  1. 复制安装路径中prince.exe所在bin的文件夹路径(我的是D:\all_applications\forPrince\prince20260517\engine\bin了)
  2. 在电脑设置中搜索“环境变量”,打开“编辑系统环境变量”
    环境变量
    path
    将prince.exe的路径添加进来:
    添加路径
  3. 重新打开VSCode,再在MPE预览界面中选择:
    导出pdf(prince)

方法三:
通过pandoc导出PDF版:(不建议,因为渲染效果跟VSCode中的不太一致)
在markdown文件最开头加上如下front matter然后在MPE浏览页面中右键选择Export - Pandoc:

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

这里的title就是文件名。

导出pandoc

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

---
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) 中:
导出图片

4. 导出Word格式

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

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

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

导出pandoc

相关文章
|
6月前
|
编译器 程序员 Linux
实用工具:VS Code 配置 Markdown 编译器全指南
本文介绍如何在VS Code中配置高效Markdown写作环境,通过启用内置预览、安装Markdown All in One与Markdown Preview Enhanced插件,并配置Princexml实现PDF等格式导出,全面提升编辑、预览与输出效率,适合程序员、学生及内容创作者使用。
4491 2
实用工具:VS Code 配置 Markdown 编译器全指南
|
2月前
|
人工智能 自然语言处理 安全
Claude Code 全攻略:命令大全 + 实战工作流(建议收藏)
本文介绍了Claude Code终端AI助手的使用指南,主要内容包括:1)常用命令如版本查看、项目启动和更新;2)三种工作模式切换及界面说明;3)核心功能指令速查表,包含初始化、压缩对话、清除历史等操作;4)详细解析了/init、/help、/clear、/compact、/memory等关键命令的使用场景和语法。文章通过丰富的界面截图和场景示例,帮助开发者快速掌握如何通过命令行和交互界面高效使用Claude Code进行项目开发,特别强调了CLAUDE.md文件作为项目知识库的核心作用。
44115 72
Claude Code 全攻略:命令大全 + 实战工作流(建议收藏)
|
5月前
|
人工智能 JSON 自然语言处理
【2026最新最全】一篇文章带你学会Qoder编辑器
Qoder是一款面向程序员的AI编程助手,集智能补全、对话式编程、项目级理解、任务模式与规则驱动于一体,支持模型分级选择与CLI命令行操作,可自动生成文档、优化提示词,提升开发效率。
12281 10
【2026最新最全】一篇文章带你学会Qoder编辑器
|
2月前
|
人工智能 JSON BI
DeepSeek V4 来了!超越 Claude Sonnet 4.5,赶紧对接 Claude Code 体验一把
JeecgBoot AI专题研究 把 Claude Code 接入 DeepSeek V4Pro 的真实体验与避坑记录 本文记录我将 Claude Code 对接 DeepSeek 最新模型(V4Pro)后的真实体验,测试了 Skills 自动化查询和积木报表 AI 建表两个场景——有惊喜,也踩
9849 21
|
26天前
|
存储 监控 Linux
VMware vSphere 9.1 发布 - 企业级工作负载平台
ESX 9.1 & vCenter Server 9.1 | vSphere 9.1
367 1
VMware vSphere 9.1 发布 - 企业级工作负载平台
|
25天前
|
IDE 数据可视化 开发工具
2026最新Thonny(Python IDE)使用全攻略教程(附安装包+图文步骤)
Thonny是爱沙尼亚塔尔图大学开发的Python初学者专用IDE,界面极简、内置Python解释器,无需配置即可开写;其可视化调试功能可直观查看变量变化,大幅降低学习门槛。支持Win/macOS/Linux,最新版为5.x。
|
26天前
|
Java 开发者 Windows
JDK解压版免安装版下载地址和配置方法
本页提供JDK 1.6至JDK 21全版本百度网盘与夸克网盘下载链接(含提取码),覆盖Windows平台常用压缩包,文件完整、即下即用;同步附详细Windows环境变量配置步骤,助开发者快速完成Java开发环境搭建。