VS Code内置Markdown预览开箱即用但需手动保存才刷新，数学公式和Mermaid需开启对应设置，推荐安装GitHub Styling扩展以提升样式兼容性。

VS Code 内置的 Markdown 预览功能开箱即用，无需安装插件——但默认不自动刷新、不支持实时同步滚动、部分语法（如数学公式、Mermaid 图表）需要额外配置才能渲染。

怎么打开 Markdown 预览窗口

在打开 .md 文件的前提下：

• 快捷键：Ctrl+Shift+V（Windows/Linux）或 Cmd+Shift+V（macOS）
• 右键编辑器内容 → 选择 Open Preview
• 命令面板（Ctrl+Shift+P）→ 输入 Markdown: Open Preview 并回车

预览页默认以侧边栏形式打开；若已打开，再次触发会聚焦到已有预览页，不会重复新建。

为什么修改后预览不自动更新

VS Code 的预览默认是「静态快照」，保存文件（Ctrl+S）后才刷新——不是 Typora 那种实时渲染。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 确保文件已保存：未保存的编辑内容不会触发预览更新
• 检查设置："markdown.preview.autoRefresh": true 是默认值，但若被覆盖为 false 就会失效（可在设置搜索该配置项）
• 某些扩展（如 Markdown All in One）会接管预览逻辑，可能干扰原生行为；可临时禁用验证

数学公式和 Mermaid 图表不显示怎么办

原生预览默认禁用这些扩展语法，需手动启用对应支持：

• 数学公式：在设置中开启 "markdown.math.enabled"（设为 true），并确保文档中使用 $$...$$ 或 \( ... \) 包裹表达式
• Mermaid：开启 "markdown.mermaid.enabled"，且图表代码块必须声明语言为 mermaid，例如：

  graph LR\nA --> B

• 注意：Mermaid 渲染依赖内置的轻量引擎，复杂语法（如 flowchart TD 中的子图）可能不完全兼容

如何让预览更接近最终发布效果

原生预览样式简陋，不模拟 GitHub / VuePress 等平台的 CSS 行为：

• 推荐安装 Markdown Preview Github Styling 扩展，它会注入 GitHub 官方 CSS，显著提升兼容性
• 若需导出 HTML，不要依赖预览页「另存为」——它只是快照；改用命令 Markdown: Export to HTML，生成带样式的独立文件
• 表格对齐、任务列表（- [x]）等基础语法支持良好，但自定义 class、内联样式（<span style="..."></span>）会被忽略

真正影响体验的不是“能不能预览”，而是“预览是否反映你实际要发布的样式”——这点必须靠扩展补足，原生能力只够快速核对结构。