VSCode中的Markdown预览增强插件

VSCode Markdown预览增强可通过四种方法实现：一、安装Markdown All in One插件启用自动目录与公式支持；二、启用Markdown Preview Enhanced插件支持Mermaid、LaTeX及PDF导出；三、手动配置settings.json开启换行、字体与行号；四、注入自定义CSS复刻Typora样式。

如果您在使用 VSCode 编辑 Markdown 文件时发现预览界面样式简陋、缺少目录导航或无法实时渲染数学公式，则可能是默认预览功能未启用增强支持。以下是为 VSCode 添加 Markdown 预览增强能力的多种方法：

本文运行环境：MacBook Air，macOS Sequoia。

一、安装 Markdown All in One 插件

该插件提供快捷键支持、自动目录生成、表格对齐、代码块高亮等一体化增强功能，无需额外配置即可提升预览体验。

1、打开 VSCode，点击左侧活动栏的扩展图标（或按 Cmd+Shift+X）。

2、在搜索框中输入 Markdown All in One，找到作者为 Yu Zhang 的官方推荐插件。

3、点击“安装”按钮，安装完成后重启 VSCode 或重新加载窗口（Cmd+Shift+P → 输入 Reload Window → 回车）。

二、启用 Markdown Preview Enhanced 插件

该插件支持 Mermaid 图表、LaTeX 数学公式、PDF 导出、幻灯片模式及自定义 CSS 样式，适合对预览质量有更高要求的用户。

1、在扩展市场中搜索 Markdown Preview Enhanced，确认作者为 Shd101wyy。

2、点击安装，安装完毕后右键任意 Markdown 文件，选择“Open Preview to the Side”以触发增强预览。

3、首次启动时插件会自动下载依赖，如提示“Waiting for MathJax”，请确保网络可访问 CDN 资源。

Google Antigravity

谷歌推出的AI原生IDE，AI智能体协作开发

277

查看详情

三、手动配置 settings.json 启用原生增强选项

VSCode 内置 Markdown 支持可通过修改设置开启目录大纲、行号显示与字体平滑等基础增强项，不依赖第三方插件。

1、按下 Cmd+, 打开设置界面，点击右上角“打开设置（JSON）”图标。

2、在 settings.json 中添加以下配置项：

3、插入代码块："markdown.preview.breaks": true, "markdown.preview.fontFamily": "'SF Pro Text', -apple-system, BlinkMacSystemFont", "markdown.preview.enablePreviewLineNumbers": true。

4、保存文件，重新打开 Markdown 预览窗口以使配置生效。

四、集成 Typora 风格主题至预览界面

通过注入自定义 CSS 可复刻 Typora 的极简排版与段落间距，改善视觉阅读体验。

1、创建本地 CSS 文件，路径为 ~/.vscode/custom-markdown.css。

2、在该文件中写入 Typora 兼容样式规则，例如设置 body 字体大小为 16px、段落 margin-bottom 为 1.8em。

3、在 settings.json 中添加配置项："markdown.styles": ["file:///Users/yourname/.vscode/custom-markdown.css"]。

以上就是VSCode中的Markdown预览增强插件的详细内容，更多请关注php中文网其它相关文章！