如何在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等格式导出,全面提升编辑、预览与输出效率,适合程序员、学生及内容创作者使用。
4296 2
实用工具:VS Code 配置 Markdown 编译器全指南
|
2月前
|
人工智能 自然语言处理 安全
Claude Code 全攻略:命令大全 + 实战工作流(建议收藏)
本文介绍了Claude Code终端AI助手的使用指南,主要内容包括:1)常用命令如版本查看、项目启动和更新;2)三种工作模式切换及界面说明;3)核心功能指令速查表,包含初始化、压缩对话、清除历史等操作;4)详细解析了/init、/help、/clear、/compact、/memory等关键命令的使用场景和语法。文章通过丰富的界面截图和场景示例,帮助开发者快速掌握如何通过命令行和交互界面高效使用Claude Code进行项目开发,特别强调了CLAUDE.md文件作为项目知识库的核心作用。
42105 72
Claude Code 全攻略:命令大全 + 实战工作流(建议收藏)
|
20天前
|
域名解析 缓存 网络协议
DNS 与 hosts 文件:Windows 11 中的名称解析配置
本文详解Windows域名解析机制,重点对比hosts文件(本地静态映射,优先级最高)与DNS(远程动态查询)的原理、配置及优先级顺序,并指导如何在Win11中修改hosts、刷新缓存、设置DNS服务器,涵盖开发测试、访问加速、广告屏蔽等实用场景。
|
20天前
|
存储 人工智能 自然语言处理
2026年阿里云新老用户最新优惠活动:云服务器活动、免费试用活动、AI产品活动参考
阿里云2026新老用户优惠活动涵盖三大板块。云服务器方面,轻量应用服务器低至38元/年,经济型e实例99元/年,u1实例199元/年,限时限量抢购。免费试用方面,新老用户可领最高200元试用点,AI产品免费提供7000万+大模型tokens及30+款产品体验,140+云产品最长12个月免费试用。AI产品方面,百炼Token Plan支持多模型切换、多档套餐;HappyHorse视频生成模型限时8折;OpenClaw一键部署低至9.9元起。此外还提供折扣券、学生无门槛券、算力补贴等多类优惠券,整体以"普惠基础设施+零成本体验+智能化赋能"策略,全面降低上云与用AI门槛。
2026年阿里云新老用户最新优惠活动:云服务器活动、免费试用活动、AI产品活动参考
|
21天前
|
人工智能 测试技术 Shell
Claude Code 用了两周后,我发现它最强的不是写代码
Claude Code 不是普通AI编程助手,它深度融入终端工作流:读项目、跑测试、分析报错、看diff、管提交、记规则(CLAUDE.md)。它不只补代码,而是参与完整工程链路——从需求理解到文档沉淀。真正价值在于“工程化协作”,而非局部辅助。
|
26天前
|
人工智能 运维 Rust
从Cursor、Claude Code到DeepSeek-TUI:2026年五大开源AI编程助手硬核实测
本文实测Cursor、Cline、Claude Code、Aider、DeepSeek-TUI五款AI编程工具,在相同环境(M1 Mac/1500行Rust项目)下对比任务耗时、代码质量、中文支持与资源占用。聚焦工程落地:IDE派重体验,终端Agent重流程,新锐TUI重成本与中文适配。不吹不黑,只答“哪个不坑你”。
|
20天前
|
人工智能 自然语言处理 安全
阿里云百炼Token Plan和Coding Plan怎么选?一篇讲透区别与适用场景,告别纠结!
随着AI编程与智能体工具快速普及,阿里云百炼推出的订阅套餐成为开发者低成本使用大模型的主流选择。但很多用户在Token Plan与Coding Plan之间难以判断,再加上套餐状态频繁调整,很容易选错、买错、用错。本文基于2026年最新官方政策与真实使用体验,系统梳理两种套餐的定位、计费、模型支持、工具兼容性与实际限制,给出清晰可落地的选择建议,帮你一次性选对最适合自己的方案,不花冤枉钱、不踩不必要的坑。
710 4