怎么用VSCode进行Markdown文档编写?【教程】

11次阅读

vscode需配置扩展和设置才能实现markdown实时预览、语法高亮、表格对齐及pdf导出等功能;须确保文件为.md后缀、语言模式设为Markdown,安装Markdown All in One、Preview Enhanced和Code Spell Checker三大扩展,并正确配置字体解决中文乱码

怎么用VSCode进行Markdown文档编写?【教程】

VSCode 本身不依赖插件就能写 Markdown,但要获得实时预览、语法高亮、表格对齐、导出 PDF 等实用功能,必须配置基础扩展和快捷键。默认设置下,Ctrl+Shift+Vwindows/linux)或 Cmd+Shift+VmacOS)即可唤出预览,但很多人按了没反应——通常是因为当前文件没被识别为 Markdown。

让 VSCode 正确识别 .md 文件

VSCode 靠文件后缀和语言模式决定用什么语法支持。如果打开一个 readme 没后缀,或后缀是 .txt,它不会启用 Markdown 支持。

  • 确保文件以 .md.markdown 结尾
  • 手动设置语言模式:按 Ctrl+K M(Windows/Linux)或 Cmd+K MmacOS),然后输入 markdown 并回车
  • 检查右下角状态栏——应显示 Markdown,而非 Plain Textauto

开启并切换 Markdown 预览的三种方式

VSCode 内置的预览是轻量级的,不渲染 KaTeX 或 Mermaid(需额外扩展),但足以应对日常写作。注意:预览窗口默认不随编辑器滚动同步,需手动开启。

  • Ctrl+Shift+V:在编辑器右侧新开预览窗(首次使用会自动启用同步滚动)
  • Ctrl+K V:在当前编辑器下方以分栏形式打开预览(适合小屏)
  • 右键编辑区 → Open Preview to the Side:同 Ctrl+Shift+V
  • 预览中点击右上角 → 勾选 Sync Scrolling,否则上下滚动不同步

必须安装的三个基础扩展

官方 Markdown 支持只管语法高亮和基础预览,以下扩展补足真实写作刚需:

  • Markdown All in One:提供快捷键插入标题/列表/链接(如 Ctrl+1 插入 # )、自动补全、TOC 生成(Ctrl+Shift+PMarkdown All in One: Create table of Contents
  • Markdown Preview Enhanced:替代原生预览,支持 Mermaid 流程图、LaTeX 公式($E = mc^2$)、导出 html/PDF、数学符号自动渲染
  • Code Spell Checker:检测拼写错误,对英文文档尤其有用;默认忽略代码块和 inline code(`code`

导出 PDF 时字体和中文乱码怎么办

直接用 Markdown Preview Enhanced 导出 PDF,中文常显示为方块——这是因为默认用的无衬线英文字体不包含中文字形。

{   "markdown-preview-enhanced.enableScriptExecution": true,   "markdown-preview-enhanced.pdfExportPath": "./pdf",   "markdown-preview-enhanced.cssString": "@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap'); body { font-family: 'Noto Sans SC', sans-serif; }" }
  • 上述配置将 Google 的 Noto Sans SC(思源黑体简体)注入 PDF 导出样式
  • 若无法联网,可下载 .ttf 文件到本地,改用 @font-face 加载本地路径
  • 导出前务必关闭其他预览标签页,否则可能复用旧样式导致失败

真正卡住人的往往不是“怎么开始”,而是“为什么预览不更新”“为什么导出没有目录”“为什么公式不渲染”——这些问题基本都落在语言模式识别、扩展冲突、CSS 注入时机这三个点上。先确认 .md 后缀和语言模式,再装扩展,最后调样式,顺序错了就容易反复折腾。

text=ZqhQzanResources