VSCode编辑器自定义Markdown代码块渲染颜色-VSCode-PHP中文网

vscode markdown预览不读取editor.tokencolorcustomizations，因其基于独立webview渲染，仅通过markdown.styles注入css生效；需同时设置code和pre > code选择器并加!important，路径必须准确且手动刷新预览。

vscode编辑器自定义markdown代码块渲染颜色

直接改 styles.css 里的 code 和 pre code，不是改编辑器主题或 token 颜色——后者对预览无效。

为什么改 editor.tokenColorCustomizations 没用？

VSCode 的 Markdown 预览是独立 WebView 渲染的，完全不读取 editor.tokenColorCustomizations 或主题里的语法高亮配置。你调编辑器里 ```js 块的颜色，只影响编辑区，预览窗口照旧用默认灰底白字。

常见错误现象：settings.json 里写了 "editor.tokenColorCustomizations": { "textMateRules": [...] }，但预览里的代码块颜色纹丝不动。

编辑器语法高亮（editor.*）和预览渲染（WebView）是两套系统
workbench.colorCustomizations 对预览页也无效
唯一生效路径：通过 markdown.styles 注入 CSS

怎么写 styles.css 才能让代码块背景生效？

必须同时覆盖行内代码和代码块，且注意选择器优先级。VSCode 预览生成的 HTML 结构里，code 是行内，pre > code 是代码块容器。

VSCode 1.118

微软正式发布 Visual Studio Code 1.118 版本。本次更新重点强化了 AI 开发体验与企业管理能力，其中最引人注目的是新增 Copilot CLI 远程控制功能，允许开发者通过手机或网页远程监控和接管 AI 会话。同时，为了提高 AI 的运行性价比，新版本优化了令牌缓存策略以降低成本。此外，1.118 版还引入了 Chronicle 本地历史追踪、TypeScript 7.0 支持以及更严格的企业级访问管控。

下载

推荐最小可用配置：

code {
  background-color: #f0f0f0 !important;
  padding: 2px 5px;
  border-radius: 3px;
}
pre code {
  display: block;
  background-color: #2d2d2d !important;
  color: #f8f8f2 !important;
  padding: 16px;
  overflow-x: auto;
  line-height: 1.5;
}

!important 必须加，否则 VSCode 内置样式会覆盖
pre code 要设 display: block，否则背景色不撑满整块
颜色值用十六进制或 rgba()，命名色（如 lightgray）可能被忽略

路径和启用方式容易踩的坑

路径错一个字符、斜杠方向反了、没加引号，都会导致 CSS 不加载。VSCode 不报错，只是静默失效。

文件必须放在项目根目录或用户配置目录下，推荐 .vscode/styles.css
设置项是 markdown.styles（注意复数），值为数组："markdown.styles": ["./.vscode/styles.css"]
路径是相对路径时，基准是当前打开的文件夹（工作区根），不是 settings.json 所在位置
改完保存 styles.css 后，需手动刷新预览页（Ctrl+R 或点击预览右上角刷新按钮），不会自动热更新

插件干扰：Markdown Preview Enhanced 的特殊处理

如果你装了 Markdown Preview Enhanced（MPE），它有自己的样式机制，会覆盖原生 markdown.styles 设置。

MPE 的 CSS 路径配置项叫 markdown-preview-enhanced.styles，不是 markdown.styles
MPE 默认启用 github.css 主题，你要么关掉它，要么直接改 MPE 自带的 CSS 文件（路径通常在 ~/.vscode/extensions/shd101wyy.markdown-preview-enhanced-*/styles/）
最稳做法：卸载 MPE，用原生预览 + markdown.styles，避免双套样式打架

真正卡住人的往往不是怎么写 CSS，而是不知道预览根本不用编辑器配色体系，以及路径和插件之间的隐性覆盖关系。改之前先确认你在用哪个预览器，再决定动哪条路径。