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 里注明预览方式——否则别人打开原生预览，看到的完全是另一套样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
