colorhighlighter需匹配语法环境才生效,js/ts中需启用color_highlight_in_strings,高亮样式由主题linehighlight规则决定,不支持百分比rgb等新语法。

ColorHighlighter 插件装完没反应?先确认语法和触发范围
ColorHighlighter 不是全局生效的“开关”,它只在 Sublime 认为“这里可能是颜色值”的上下文中工作。最常见失效原因就是文件没被识别成支持的颜色语法环境。
- 右下角看当前语法:必须是
CSS、SCSS、HTML、Less、Vue Component或已配置支持的JavaScript(如 Babel 语法)——若显示Plain Text或JSON,插件完全不启动 -
Ctrl+Shift+P输入Set Syntax: CSS临时切一下,立刻验证是否恢复高亮 - JS 文件里写
color: '#ff0000'默认不触发;需在用户设置中开启"color_highlight_in_strings": true,且该字符串得落在合法 CSS 属性值位置(比如style对象或模板字符串中带cssscope)
怎么让 JS/TS 里的颜色字符串也高亮?关键靠配置项
默认情况下,ColorHighlighter 只处理样式表或 HTML style 属性中的颜色,不会扫描 JS 字符串。想让它在 const bg = 'hsl(200, 50%, 70%)' 这类代码中也起作用,必须显式启用字符串内匹配。
- 打开
Preferences → Package Settings → Color Highlighter → Settings - 在右侧用户设置中添加:
{ "color_highlight_in_strings": true } - 注意:这会略微增加小文件解析延迟(毫秒级),但对现代机器无感;若大量使用颜色字符串的大型 TSX 项目,可搭配
"supported_color_names": false关闭预定义名(如red、transparent)来微调性能 - 别漏掉重启或手动刷新:改完设置后执行
Color Highlighter: Highlight命令,确保缓存重载
高亮样式太淡/太刺眼?不是改插件,而是改主题里的 lineHighlight
ColorHighlighter 自身不控制高亮色块的透明度或边框风格,它只负责“标出哪段是颜色”。真正决定你看到的是填充色、描边还是下划线的,是它的 ha_style 配置,而最终渲染效果由当前配色方案(.sublime-color-scheme)中 lineHighlight 规则的 background 值决定。
- 用户设置中加:
{ "ha_style": "filled" }(可选值:filled、outlined、underlined) - 但如果你发现
filled下颜色几乎看不见,问题大概率出在主题上:打开Preferences → Color Scheme,记下当前主题名(如Monokai.sublime-color-scheme),用PackageResourceViewer打开它,搜索lineHighlight - 若找不到该 key,说明主题未定义行高亮背景,此时即使插件开了也白搭——要么换主题,要么手动补一行:
"lineHighlight": { "background": "hsla(0, 0%, 95%, 0.4)" }
为什么 rgb(255, 0, 0) 高亮了,rgb(100%, 0%, 0%) 却不行?
ColorHighlighter 默认只识别标准 CSS 颜色函数语法,对百分比形式的 rgb()、带空格的 hsl( 120 , 50% , 50% ) 或带单位的 color(display-p3 1 0 0) 等新语法,原生不支持。
- 这是设计限制,不是 bug:插件基于正则匹配,无法做完整 CSS 解析
- 常见失效写法:
rgba(255, 0, 0, .5)(缺前导零)、#fff0(4位 hex)、oklch(60% 0.2 270)(新色彩空间) - 临时绕过:把颜色抽成变量,用预处理器(如 SCSS)编译后再看——插件对编译后输出的
#ff0000是能识别的 - 真要支持新语法?得等插件作者更新正则,或你自己 fork 后修改
color_highlighter.py中的color_regexes列表
#ggg 和 rgb(999,0,0) 都会被高亮,只是颜色显示异常。这点在调试 UI 时反而容易误导。











