colorhighlighter 默认不启用行背景高亮,需手动将 ha_style 设为 "background" 并写入用户配置;仅当文件语法为 css/html/js/vue 且颜色格式合规时生效,注释中颜色默认不识别。

装完 ColorHighlighter 默认不实时渲染行背景色——它默认只在颜色值旁加小色块,要改成整行背景高亮,得手动改 ha_style 配置项。
ColorHighlighter 的 ha_style 控制渲染方式
插件默认用 ha_style = "block"(小色块),不是行背景。想让 #ff6b6b 这类颜色直接把整行染成对应色,必须显式设为 "background"。
-
ha_style是用户设置里唯一决定“怎么画颜色”的参数,其他配置都不影响渲染形态 - 可选值只有
"block"、"background"、"gutter";"background"才触发行级背景填充 - 该配置必须写进
Preferences → Package Settings → ColorHighlighter → Settings - User,不能写在全局 Settings 里 - 示例配置片段:
{"ha_style": "background"}
为什么设了 background 还没反应
常见原因不是配置错,而是语法识别或颜色格式被过滤了。
- 右下角状态栏必须显示
CSS、HTML、JavaScript或Vue Component;显示Plain Text或JSON时插件完全不运行 - 默认只支持
#fff、rgb(255,0,0)、hsl(0,100%,50%)、red;像var(--primary)或color(display-p3 1 0 0)不识别 - JS 字符串里的颜色(如
el.style.color = "#3498db")需额外开启"color_highlight_in_strings": true - 保存配置后,按
Ctrl+Shift+P输入Color Highlighter: Highlight手动刷新一次,否则缓存不更新
行背景高亮和 highlight_line 冲突吗
不冲突,但视觉上会叠加——highlight_line 是光标所在行的浅色底,ha_style: "background" 是颜色值所在行的实色底,后者优先级更高。
- 如果某行同时有光标且含颜色值,你会看到纯色背景(来自 ColorHighlighter),不是半透明叠加
- 若颜色值在注释里(如
/* #ff0000 */),默认不生效;需确认当前语法是否把注释内容纳入颜色解析范围 - 部分主题的
region.line规则带 alpha(如hsla(0,0%,100%,0.05)),可能被background模式完全覆盖,看不出差异
真正容易被忽略的是:ColorHighlighter 的行背景只作用于「包含颜色字面量的那行」,不是「光标所在的那行」——哪怕你把光标移到隔壁空行,只要那行没写 #000 或 blue,就不会变色。











