VSCode的Markdown预览功能增强插件

VSCode Markdown 预览功能增强需安装四款插件：1. Markdown All in One 提升编辑与同步预览效率；2. Markdown Preview Enhanced 支持数学公式、Mermaid 等高级渲染；3. Markdown Preview Mermaid Support 补充 Mermaid 图表支持；4. Markdown Theme Styler 实现预览样式个性化定制。

如果您在使用 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 → 输入 Developer: Reload Window）。

二、启用 Markdown Preview Enhanced

此插件支持 LaTeX 数学公式、Mermaid 流程图、PlantUML、PDF 导出及自定义 CSS 样式，适用于技术文档深度编写场景。

1、在扩展市场中搜索 Markdown Preview Enhanced，选择作者为 shd101wyy 的版本。

2、安装后，右键任意 Markdown 文件，选择 Open Preview to the Side 启动增强预览。

3、在预览界面右上角点击齿轮图标，进入设置页，勾选 Enable Math Typesetting 和 Enable Mermaid。

三、配置 Markdown Preview Mermaid Support

当主预览插件未原生支持 Mermaid 图表时，该轻量插件可独立注入 Mermaid 渲染引擎，确保流程图、时序图正确显示。

1、在扩展市场中搜索 Markdown Preview Mermaid Support，安装由 bierner 发布的插件。

2、无需额外配置，只要已启用其他 Markdown 预览器（如内置预览或 Preview Enhanced），Mermaid 代码块将自动识别并渲染。

3、验证方式：在 Markdown 文件中插入如下代码块并保存：

graph LR\nA[开始] --> B(处理)\nB --> C{判断}

四、应用 Markdown Theme Styler

该插件允许用户通过简单 JSON 配置修改预览页面的字体、行高、背景色及代码块样式，实现个性化视觉呈现。

1、安装插件 Markdown Theme Styler（作者：tchayen）。

2、按下 Cmd+Shift+P，输入 Markdown Theme Styler: Edit Styling 并回车。

3、在打开的 markdown-theme-styler.json 中添加自定义 CSS 规则，例如：
"body": {"background-color": "#f8f9fa", "font-family": "SF Pro Text, -apple-system"}。