Color Highlight插件默认不渲染CSS变量、注释颜色及Vue内联样式中的颜色块，需手动启用colorHighlight.showColorsInComment、配置colorHighlight.colors正则匹配var()、补全colorHighlight.languages数组（含vue/javascript）、并确保editor.decorations为true。
Color Highlight 插件能直接在代码里渲染颜色块，但默认不处理 CSS 变量、注释里的颜色值或 Vue 文件中的内联样式——得手动开几个开关才行。
Color Highlight 为什么有些颜色不显示色块
常见现象是 #3498db 或 rgb(52, 152, 219) 能渲染，但 var(--primary)、// #ff6b6b 或 :style="{ background: '#f00' }" 旁边空空如也。
- 语言模式没识别对：右下角显示
Plain Text或Vue（而非HTML/CSS）时，插件根本不会启动匹配 -
colorHighlight.languages数组里缺了"vue"或"javascript"，导致 .vue 或 JSX 中的字符串颜色被跳过 -
colorHighlight.showColorsInComment默认为false，注释里的颜色值一律忽略 - 主题禁用了装饰（
editor.decorations设为false），所有色块底层渲染被关掉
让 CSS 变量和注释颜色也高亮的关键配置
打开 settings.json，补全这几项才能覆盖真实项目场景：
- 启用注释染色：
"colorHighlight.showColorsInComment": true - 支持 CSS 自定义属性：
"colorHighlight.colors": [{"pattern": "var\(--[^)]+\)", "color": "$1"}]（注意双反斜杠转义） - 扩展语言支持：
"colorHighlight.languages": ["css", "scss", "html", "vue", "javascript"] - 确保装饰开启：
"editor.decorations": true（全局设置，非插件专属）
改完保存，重新打开一个含 var(--bg) 或 // #2ecc71 的文件就能立刻看到效果。
自定义色块样式：别让高亮抢了代码焦点
默认色块太实、边框太粗，在深色主题下容易糊成一片。调整透明度和尺寸更稳妥：
-
"colorHighlight.opacity": 0.7—— 避免背景色完全盖住文字 -
"colorHighlight.border": false—— 边框在小字号下反而增加视觉噪点 -
"colorHighlight.height": 14—— 控制色块高度，匹配当前字体行高（默认 12 常偏矮） - 如果用浅色主题，加
"colorHighlight.lightOpacity": 0.6单独调低亮度下的透明度
真正难的不是加插件，而是搞清哪些颜色语法它“认”，哪些要靠正则硬喂；还有，别忘了 editor.decorations 这个总被忽略的全局开关——关了它，所有颜色渲染都白配。
