VSCode的Markdown预览样式怎么自定义？_修改CSS打造个性视图【教程】

vscode 原生 markdown 预览无法通过用户 css 自定义，因其运行在隔离 webview 中且样式硬编码；唯一稳定方案是使用扩展 markdown-preview-enhanced（MPE），通过工作区 settings.json 配置 style 路径注入自定义 CSS。

VSCode 内置的 Markdown 预览样式不能直接通过用户 CSS 文件覆盖，因为它的预览页运行在独立的、受限制的 webview 环境中，styles.css 或 workbench.html 类修改完全无效。

为什么直接改 VSCode 主题 CSS 没用？

VSCode 的 Markdown 预览（Ctrl+Shift+V）本质是一个隔离的 webview，它不继承编辑器主题的 CSS，也不加载你工作区或用户目录下的任意 CSS 文件。所有样式由 VSCode 自行注入，且路径硬编码、无公开 hook。

• 修改 $VSCODE_HOME/resources/app/out/vs/workbench/contrib/markdown/browser/media/ 下的内置 CSS —— 重启即被覆盖，且升级后丢失
• 试图用 markdown.styles 设置指向本地 CSS —— 仅对 markdown-it 渲染的「内联预览」（如悬停 tooltip）生效，对主预览窗无效
• 启用 markdown.preview.experimental.useEditorStyle —— 该设置已在 1.85+ 版本移除，不再存在

真正可行的自定义方式：用 markdown.extension

唯一稳定、可维护、无需改源码的方案是使用社区扩展 shd101wyy.markdown-preview-enhanced（简称 MPE），它接管预览逻辑，支持完整 CSS 注入。

• 安装后，预览快捷键变为 Ctrl+K V（或右键 → “Open Preview to the Side”）
• 在工作区根目录新建 .vscode/settings.json，添加：

{   "markdown-preview-enhanced.enableExtendedAutoscroll": true,   "markdown-preview-enhanced.style": "./mystyle.css" }

• 创建同级 mystyle.css，例如调整标题间距和代码块字体：

h1, h2, h3 {   margin-top: 1.5em;   margin-bottom: 0.5em; } code {   font-family: 'Fira Code', monospace;   background: #f5f5f5; }

• 注意：style 路径必须是相对于工作区根目录的相对路径，不能用 ~ 或绝对路径

进阶控制：用自定义 mathjax / katex 样式

MPE 默认用 KaTeX 渲染数学公式，但其默认样式与正文字体不协调。可在 mystyle.css 中覆盖：

立即学习“前端免费学习笔记（深入）”；

• KaTeX 公式字号偏小？加这段：

.katex { font-size: 1.2em !important; } .katex .mathit { font-family: 'IBM Plex Serif' !important; }

• 想让行内公式（$...$）背景浅灰、圆角？补上：

span.katex-inline {   background: #f9f9f9;   padding: 0 4px;   border-radius: 3px; }

• ⚠️ 所有选择器必须带 !important，否则 KaTeX 内联 style 会优先

最常被忽略的一点：MPE 的 CSS 注入只在「它启动的预览页」里生效；原生预览（Ctrl+Shift+V）永远不可定制。如果你团队协作或写文档时依赖统一渲染效果，务必统一使用 MPE 并在 README 里注明预览方式——否则别人打开原生预览，看到的完全是另一套样式。