如何在vscode中编写Markdown文件并导出文档【教程】

10次阅读

VS Code 无内置导出功能,需依赖扩展;推荐 markdown Preview Enhanced,支持实时预览及导出 PDF/html/word(后者需 Pandoc),并兼容公式、图表与自定义样式。

vs code 本身不内置「导出 markdown 为 pdf/word」功能,所有导出能力都依赖扩展或外部工具。直接在 vs code 里点几下就生成排版精良的 pdf?做不到。但搭配合适扩展,流程可以很顺。

Markdown Preview Enhanced 实时预览 + 一键导出 PDF

这是目前最成熟的 VS Code Markdown 导出方案,支持数学公式、Mermaid 图表、自定义 css、导出 PDF/HTML/Word(需 Pandoc)。

  • 安装扩展:在扩展市场搜索 Markdown Preview Enhanced(作者:Shd101wyy)并安装
  • 重启 VS Code 后,打开任意 .md 文件,右键选择 Markdown Preview Enhanced: Open Preview to the Side
  • 预览窗口右上角有导出按钮(图标为 ↓),点击可选 Export to PDF
  • 首次导出 PDF 会提示安装 phantomjs 或推荐改用 puppeteer(更现代);建议按提示运行:
    npm install -g puppeteer
  • 导出效果受文档内 html 标签、style 块和 YAML front matter 中的 pdf_options 控制,例如:
    --- pdf_options:   format: 'A4'   margin: {top: '20px', right: '20px', bottom: '20px', left: '20px'} ---

导出 Word(.docx)必须装 Pandoc + 配置路径

Markdown Preview EnhancedExport to Docx 功能不会自动下载 Pandoc —— 它只是调用命令行工具。缺 Pandoc 就会报错:Error: Command failed: pandoc --version

  • pandoc.org/installing.html 下载对应系统安装包(windows 推荐 msi 版,macosbrew install pandoc
  • 安装后终端执行 pandoc --version 确认可用
  • VS Code 设置中搜索 mpe.pandocPath,填入完整路径,例如:
    Windows:C:Program FilesPandocpandoc.exe
    macOS:/opt/homebrew/bin/pandoc
  • 再次右键 → Export to Docx,生成的 .docx 会保留标题层级、列表、代码块样式(但复杂表格/图表支持有限)

别依赖 VS Code 内置预览做导出判断

VS Code 自带的 Ctrl+Shift+V 预览(Markdown Preview)只用于看效果,它没有导出菜单,也不支持 Mermaid、LaTeX 渲染。如果你发现公式不显示、流程图空白,却想导出——说明你正在用错预览器。

  • 确认当前预览页 URL 是否含 preview-enhanced 字样(MPE 的预览地址是 http://localhost:xxxx/preview-enhanced/...
  • 禁用或卸载其他 Markdown 预览类扩展(如 Markdown All in One 的预览功能可能冲突)
  • MPE 的导出是基于实时渲染后的 HTML 快照,所以预览里看不到的内容,导出后也一定没有

真正卡住人的从来不是“怎么点”,而是 Pandoc 路径配错、puppeteer 权限被拒、或误把 gitHub Flavored Markdown 当作通用标准去套排版规则。导出前先确保预览里一切正常,比反复试导出更省时间。

text=ZqhQzanResources