如何在 VSCode 中预览 Markdown(.md) 文件?

235 阅读2分钟

VSCode 中预览 Markdown(.md) 文件的完整指南

VSCode 内置了 Markdown 预览功能,可以实时查看 Markdown 文件的渲染效果。当你编写文档、README 文件或技术笔记时,预览功能能帮你确认格式是否正确。

使用内置预览功能

VSCode 自带 Markdown 预览,无需安装额外插件。

打开预览窗口

在编辑 Markdown 文件时,按 Ctrl+Shift+V(Windows/Linux)或 Cmd+Shift+V(Mac)即可打开预览窗口。预览窗口会在新标签页中显示渲染后的内容。 alt text

并排预览

如果希望边编辑边预览,按 Ctrl+K V(Windows/Linux)或 Cmd+K V(Mac),先按 Cmd+K,松开后再按 V。这会在编辑器右侧打开预览面板,左侧编辑文件,右侧实时显示预览效果。 alt text alt text

通过命令面板操作

Ctrl+Shift+P(Windows/Linux)或 Cmd+Shift+P(Mac)打开命令面板,输入 "Markdown",可以看到相关命令:

  • Markdown: Open Preview - 打开预览
  • Markdown: Open Preview to the Side - 并排预览
  • Markdown: Open Source - 从预览返回源文件

通过右键菜单

在 Markdown 文件的编辑器标签上右键,选择 Open PreviewOpen Preview to the Side

alt text

使用插件增强预览功能

虽然内置预览功能已经很实用,但插件可以提供更多特性和更好的体验。

安装 Markdown Preview Enhanced 插件

这是最受欢迎的 Markdown 预览插件之一。

安装方法

  1. Ctrl+Shift+X(Windows/Linux)或 Cmd+Shift+X(Mac)打开扩展面板
  2. 在搜索框中输入 "Markdown Preview Enhanced"
  3. 找到由 Yiyi Wang 开发的插件,点击 "Install"

alt text

使用插件预览

安装后,在 Markdown 文件中右键,选择 Markdown Preview Enhanced: Open Preview to the Side,或按 Ctrl+K Valt text

插件特色功能

  • 支持数学公式(LaTeX)
  • 支持流程图和时序图(mermaid、PlantUML)
  • 支持目录生成
  • 支持导出为 PDF、HTML、PNG 等格式
  • 支持幻灯片模式
  • 更丰富的主题样式 alt text alt text

其他推荐插件

Markdown All in One:

提供快捷键、自动补全、格式化等功能,包含预览功能和目录生成。

安装方法

  1. 打开扩展面板
  2. 搜索 "Markdown All in One"
  3. 安装 Yu Zhang 开发的插件
markdownlint:
  • 检查 Markdown 语法错误
  • 提供格式规范建议
  • 帮助保持文档质量