如何在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

相关文章
|
18天前
|
人工智能 JSON 供应链
畅用7个月无影 JVS Claw |手把手教你把JVS改造成「科研与产业地理情报可视化大师」
LucianaiB分享零成本畅用JVS Claw教程(学生认证享7个月使用权),并开源GeoMind项目——将JVS改造为科研与产业地理情报可视化AI助手,支持飞书文档解析、地理编码与腾讯地图可视化,助力产业关系图谱构建。
23534 12
畅用7个月无影 JVS Claw |手把手教你把JVS改造成「科研与产业地理情报可视化大师」
|
6天前
|
Shell API 开发工具
Claude Code 快速上手指南(新手友好版)
AI编程工具卷疯啦!Claude Code凭借任务驱动+终端原生的特性,成了开发者的效率搭子。本文从安装、登录、切换国产模型到常用命令,手把手带新手快速上手,全程避坑,30分钟独立用起来。
1747 10
|
3天前
|
人工智能 开发工具 iOS开发
Claude Code 新手完全上手指南:安装、国产模型配置与常用命令全解
Claude Code 是一款运行在终端环境中的 AI 编程助手,能够直接在命令行中完成代码生成、项目分析、文件修改、命令执行、Git 管理等开发全流程工作。它最大的特点是**任务驱动、终端原生、轻量高效、多模型兼容**,无需图形界面、不依赖 IDE 插件,能够深度融入开发者日常工作流。
1169 1
|
5天前
|
人工智能 JSON BI
DeepSeek V4-Pro 接入 Claude Code 完全实战:体验、测试与关键避坑指南
Claude Code 作为当前主流的 AI 编程辅助工具,凭借强大的代码理解、工程执行与自动化能力深受开发者喜爱,但原生模型的使用成本相对较高。为了在保持能力的同时进一步降低开销,不少开发者开始寻找兼容度高、价格更友好的替代模型。DeepSeek V4 系列的发布带来了新的选择,该系列包含 V4-Pro 与 V4-Flash 两款模型,并提供了与 Anthropic 完全兼容的 API 接口,理论上只需简单修改配置,即可让 Claude Code 无缝切换为 DeepSeek 引擎。
1236 0
|
12天前
|
人工智能 缓存 Shell
Claude Code 全攻略:命令大全 + 实战工作流(完整版)
Claude Code 是一款运行在终端环境下的 AI 编码助手,能够直接在项目目录中理解代码结构、编辑文件、执行命令、执行开发计划,并支持持久化记忆、上下文压缩、后台任务、多模型切换等专业能力。对于日常开发、项目维护、快速重构、代码审查等场景,它可以大幅减少手动操作、提升编码效率。本文从常用命令、界面模式、核心指令、记忆机制、图片处理、进阶工作流等维度完整说明,帮助开发者快速上手并稳定使用。
2789 4
|
3天前
|
人工智能 JSON BI
Claude Code 搭配 DeepSeek V4-Pro 完整测评:超越 Claude Sonnet 4.5,低成本高效能背后的真实表现
Claude Code 凭借强大的代码理解、工程执行与自动化任务能力,成为开发者广泛使用的 AI 编程工具。但原生模型的调用成本较高,长期高频使用会带来明显开销。DeepSeek V4 系列模型发布后,凭借优秀的代码能力与兼容 Anthropic 协议的 API 接口,成为替代原生模型的高性价比选择。本文完整记录将 Claude Code 对接 DeepSeek V4-Pro 的配置流程、真实任务测试效果、优势亮点与必须注意的使用限制,为开发者提供可直接落地的参考方案。
791 1
|
5天前
|
人工智能 Linux API
hermes agent 安装教程:安装优化 + 模型配置 + 工具启用指南
Hermes Agent 是 Nous Research 于 2026 年发布的开源自主进化 AI 智能体框架(MIT 协议,Python 编写)。它通过任务沉淀技能、持久化记忆、原生多工具集成与并行子智能体,实现“越用越强”。支持 Linux/macOS/WSL2,安装便捷,面向个人与企业的新一代私有化 AI 助手。