colorhighlighter需同时满足语法识别、配置启用、插件加载才生效;右下角语法须为css/scss等支持类型,字符串内颜色需开启color_highlight_in_strings,rgb/hsl/names需在supported_color_types中显式声明,样式由ha_style等参数控制。

ColorHighlighter 装完不会自动显示真实色彩背景——它必须同时满足语法识别、配置启用、插件加载三件事,缺一不可。不是插件坏了,是它根本没启动。
为什么装完没颜色?先看右下角语法状态
插件只在特定语法上下文中激活,不是全局扫描。如果右下角显示 Plain Text、JSON 或 Python,ColorHighlighter 完全不运行。
- 写 CSS 时,右下角必须是
CSS或SCSS;点它 →Set Syntax → CSS -
.vue文件中<style></style>块内,光标停住后右键 →Set Syntax → CSS(不能用Vue或HTML) - JS 文件里写
el.style.color = "#3498db",语法得是JavaScript,且需额外开开关(见下条) - HTML 内联
style="color: #fff",同样要设成CSS语法才生效
JS 字符串里的颜色不亮?手动开 color_highlight_in_strings
ColorHighlighter 默认跳过字符串内容,避免误触发和性能损耗。所以 const bg = "#336699" 或模板字符串中 `background: ${bg}` 不会高亮。
- 菜单 →
Preferences → Package Settings → ColorHighlighter → Settings - User - 添加这一行:
"color_highlight_in_strings": true(注意 JSON 格式:双引号、逗号、花括号一个都不能少) - 保存后,按
Ctrl+Shift+P输入Color Highlighter: Highlight手动执行一次,强制刷新缓存 - 开启后可能轻微拖慢大 JS 文件响应,仅写 CSS 的项目建议保持
false
Hex 和 rgb() 都不亮?检查 supported_color_types 配置
插件默认只开 "hex",rgb()、hsl()、names 全部被关掉。不是“不支持”,是默认没启用。
- 用户设置里加完整数组:
"supported_color_types": ["hex", "rgb", "hsl", "names"] - 别只写
"rgb"—— 这会覆盖默认项,导致#000反而失效 -
names包含red、rebeccapurple等,但仅限出现在合法样式位置(如color: red;),变量赋值需配合color_highlight_in_strings - 旧版插件(v2.x)不支持该字段,务必确认已升级到 v3.0+
色块太小/盖字/透明度不对?调 ha_style 和 opacity
预览样式由插件自身参数控制,不是主题文件决定的。改错地方只会白忙活。
-
"ha_style": "outlined"最轻量:只画一圈边框,深色主题下文字不被吞 -
"icons_size": "1.4x"放大色块,"0.7x"缩小;别超"2x",否则挤占代码空间 -
"opacity": 0.6控制背景透明度(范围0.0–1.0),比硬调background更安全 - 修改后保存即生效,但已打开的文件需手动重载(右键 →
Revert File)
复杂点在于:语法识别、配置项、插件版本三者必须对齐;容易被忽略的是——ColorHighlighter 对作用域极其敏感,哪怕多一个空格或引号位置不对,都可能让颜色值落在“非样式上下文”里,直接跳过解析。











