VSCode内置Markdown预览不支持通过markdown.styles注入自定义CSS，该配置仅作用于悬停提示等内联片段，主预览页因沙箱隔离而忽略该设置；唯一稳定方案是使用markdown-preview-enhanced扩展，需在工作区settings.json中配置相对路径的style选项，并通过开发者工具验证CSS是否加载。
VSCode 内置的 Markdown 预览（Ctrl+Shift+V）不支持直接注入自定义 CSS —— 你改了 markdown.styles，它只对悬停 tooltip、内联预览等极小范围生效，主预览窗完全无视。真能稳定生效的，只有用 markdown-preview-enhanced 这类接管渲染逻辑的扩展。
为什么 markdown.styles 在 VSCode 里基本无效
这个配置项名义上是“让 VSCode 加载外部 CSS”，但实际只作用于 markdown-it 解析器生成的轻量级内联片段（比如鼠标悬停时的代码提示），而非整个预览 WebView 页面。主预览页运行在隔离沙箱中，样式由 VSCode 硬编码注入，路径不可覆盖、hook 不可注册。
-
markdown.styles指向的 CSS 文件，根本不会出现在预览页的<head>中 - 修改
$VSCODE_HOME/resources/app/.../media/下的内置 CSS？升级后立即丢失，且每次重启编辑器都会被重置 -
markdown.preview.experimental.useEditorStyle已在 1.85+ 版本彻底移除，现在设了也无反应
用 markdown-preview-enhanced 注入 CSS 的实操要点
这是目前唯一无需改源码、不依赖版本、可跨团队同步的方案。安装后，预览入口变为右键菜单里的 Open Preview to the Side 或快捷键 Ctrl+K V。
- 必须在工作区根目录下创建
.vscode/settings.json，不能写进用户全局设置 -
"markdown-preview-enhanced.style"的值必须是相对路径，例如"./styles/mystyle.css"，不支持~、../跨出工作区、也不接受绝对路径 - CSS 文件需保存为 UTF-8 编码，BOM 会导致解析失败（尤其 Windows 上用记事本另存时默认带 BOM）
- 修改 CSS 后，需手动刷新预览页（
Ctrl+R），不会自动热更新
常见 CSS 选择器失效原因与绕过方式
VSCode 内置预览和 MPE 渲染出的 HTML 结构不同，很多你以为能直接写的规则会失效。比如：
WiseOCR — 将 PDF 或图片文件转换为高质量 Markdown 文本，支持表格完整识别、多栏版式还原、中英文混排。适用场景：扫描件文字提取、纸质文档数字化、合同/报告/论文转文本、图片中文字提取。支持格式：PDF、JPG、JPEG、PNG、WEBP、GIF、BMP、TIFF。触发：用户上传文件并要求"帮我识别这个文件的文字"、"PDF转文字"、"图片转文本"、"帮我提取这个表格"——会调用本技能。说"用Wi
立即学习“前端免费学习笔记（深入）”；
- 写
h1 { color: red; }可能没效果 —— MPE 默认给标题加了class="section-header"，建议用h1.section-header或加!important（慎用） -
code和pre > code必须分开写，前者是行内代码，后者是代码块，MPE 默认给它们不同 class（如language-js） - 数学公式（KaTeX）默认样式独立，需额外在 CSS 中覆盖
.katex相关选择器，否则字体、字号会突兀 - 不要依赖
body或html全局样式 —— MPE 渲染容器是#preview下的子节点，最好从#preview开始限定作用域
调试 CSS 是否真正加载成功
别靠“看起来变了”判断，得看真实 DOM：
- 在 MPE 预览页按
Ctrl+Shift+I打开开发者工具，切换到Elements面板 - 检查
<head>里有没有你指定的 CSS 文件<link rel="stylesheet"> - 选中任意元素，右侧
Styles面板里搜索你的 CSS 规则名，确认是否被列出、是否被划掉（被更高优先级覆盖） - 如果没出现，90% 是路径错误或文件未被读取（比如权限问题、路径含中文、文件名大小写不匹配）
真正卡住人的地方往往不是怎么写 CSS，而是 VSCode 预览机制本身不透明 —— 它不报错、不提示路径失败、不告诉你为什么没加载。盯住开发者工具里的 <head>，比反复改 CSS 有用十倍。
