【markdown】 VSCode 使用 Markdown Preview Enhanced 插件转PDF

🔧 一、安装 Markdown Preview Enhanced 插件

1. 打开 VSCode。
2. 按下 Ctrl + Shift + X 打开扩展市场。
3. 搜索 Markdown Preview Enhanced，点击安装（作者为 Yiyi Wang）。
   

👁️ 二、使用插件进行 Markdown 预览

1. 打开 .md 文件。
2. 按下 Ctrl + Shift + V 或点击右上角 “Markdown Preview Enhanced: Open Preview To The Side”。
3. 可以看到实时预览效果。

---

📤 三、导出 PDF（带彩图与样式）

1. 打开需要导出的 Markdown 文件并预览。

2. 在预览窗口内右上角点击「菜单」图标（三个点），选择 Export PDF。

3. 如果提示需要安装 puppeteer 或 princexml：

   • 推荐选择 puppeteer（自动安装 Chrome Headless），导出效果较好。
   • 会在底部弹出命令行窗口自动下载依赖，等待完成即可。

---

🚧 四、解决导出 PDF 不显示横线（<hr> 或 ---）问题

✅ 步骤一

在 VSCode 命令面板中（快捷键 Ctrl+Shift+P）搜索：

Markdown Preview Enhanced: Customize Preview Html Head (Global)

点进去，会打开一个 head.html 的文件。

---

✅ 步骤二：添加 CSS 代码让横线显示

在打开的 head.html 中添加以下内容：

<style>
hr {border: none;border-top: 1px solid #bbb;margin: 24px 0;
}
</style>

保存文件。

---

2. 使用 @media print 添加打印专用样式，强制让横线打印时也显示：

<style>hr {border: none;border-top: 1px solid #bbb;margin: 24px 0;}@media print {hr {border: none;border-top: 1px solid #bbb !important;margin: 24px 0 !important;height: 1px !important;visibility: visible !important;display: block !important;}}
</style>

把这段代码放进：
Markdown Preview Enhanced: Customize Preview Html Head (Global) 里添加进去，或者你当前页面的 HTML 头中。

---

✅ 解决方案二：使用 html 标签替代 ---

如果你用的是 Markdown 的横线 ---、***，可以手动替换为：

<hr />

🧪 示例