如何通过Blockman扩展设置VS Code代码块背景颜色？

安全阿岳

2026-7-13

Blockman扩展代码块颜色修改及原生替代方案

修改Blockman标注的代码块颜色
在settings.json的workbench.colorCustomizations中，使用blockman.blockBackground属性设置全局代码块背景色。如果需要区分嵌套层级，还可以用blockman.blockBackground1至blockman.blockBackground9分别定义各级代码块颜色。示例配置：
```
"workbench.colorCustomizations": {
    "blockman.blockBackground": "#f0f5ff",
    "blockman.blockBackground1": "#e5edff"
}
```
无需额外扩展实现代码块高亮
VS Code原生支持通过文本Mate规则配置代码块背景，无需安装任何扩展。在editor.tokenColorCustomizations中添加规则，针对代码块的meta.block作用域设置背景色即可：
```
"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": "meta.block",
            "settings": {
                "background": "#f0f5ff"
            }
        }
    ]
}
```
实现颜色随设置自动更改
不管用Blockman还是原生方案，都可以使用VS Code内置的主题颜色变量替代固定色值，比如${editor.background}、${sideBar.foreground}等，这样切换主题或修改主题颜色时，代码块颜色会自动适配。示例：
```
"workbench.colorCustomizations": {
    "blockman.blockBackground": "${editor.background}dd"
}
```
末尾的dd为透明度参数，可按需调整。