能,ColorHighlighter 可预览 #FF5733 等颜色,但需文件语法识别为 CSS/JS 等支持类型,并正确配置 color_highlight_in_strings、supported_color_types 及 ha_style 等参数。

ColorHighlighter 能不能直接预览 #FF5733 这类颜色?
能,但不是“装完就亮”,它依赖文件语法识别和插件配置双生效。Hex 颜色如 #FF5733、#000、#ffffff 会渲染成小色块或行内背景,前提是 Sublime 正确识别当前文件为 CSS/SCSS/HTML/JS 等支持颜色语境的类型。
- 右下角显示
Plain Text?点它 → 改成CSS或JavaScript,否则插件压根不触发 - 安装后没反应?先按
Ctrl+Shift+P(Win/Linux)或Cmd+Shift+P(Mac),输入Color Highlighter: Highlight手动执行一次,看是否出效果 - 支持 rgb()、hsl()、
red这类命名色,但默认不处理字符串里的颜色值(比如 JS 中el.style.color = "#336699"),需手动开启color_highlight_in_strings
怎么让 JS 字符串里的 #336699 也高亮?
ColorHighlighter 默认只在样式声明区域(如 CSS 规则、style 属性)生效,JS 字符串属于“非标准颜色上下文”,必须显式启用扩展支持。
- 进
Preferences → Package Settings → Color Highlighter → Settings - User - 添加这一行:
"color_highlight_in_strings": true - 保存后,像
document.body.style.backgroundColor = "#336699"或模板字符串中`color: ${color}`的 Hex 值才会被识别 - 注意:开启后可能轻微拖慢大文件响应,尤其含大量字符串的 JS;若只写 CSS,建议保持关闭
为什么 #000 显示了色块,但 rgb(0,0,0) 没反应?
不是插件坏了,是默认配置里 rgb() 解析被关掉了。ColorHighlighter 把不同颜色格式分组管理,rgb 和 hex 是两套规则,默认只开 Hex。
- 打开用户设置(同上路径),加入:
"supported_color_types": ["hex", "rgb", "hsl", "names"] - 别漏掉引号和逗号,格式必须是 JSON 数组,写成
"rgb"不是rgb -
names对应red、transparent等预定义名;hsl包括hsla() - 如果只加
"rgb"没加"hex",反而会让#000失效——它不会自动继承默认项
色块太小 / 边框太粗 / 背景太透明?怎么调样式?
预览外观由 ha_style、icons_size、opacity 等参数控制,不是靠改主题文件,全在 ColorHighlighter 自己的设置里调。
-
"ha_style": "filled"(填满)、"outlined"(仅边框)、"underlined"(底线)三选一 -
"icons_size": "1.2x"可放大色块,"0.8x"缩小;数值支持小数,但别超2x,否则挤占代码空间 - 半透明白色背景干扰阅读?加
"opacity": 0.7(范围 0.0–1.0),比硬调background值更安全 - 修改后不用重启,保存即生效;但若用了自定义 color_scheme,且该主题把
selection色设得和色块太近,仍可能视觉混淆
真正卡住人的地方,往往不是不会装插件,而是右下角明明写着 CSS,却因为文件没保存(.css 后缀未绑定)、或刚新建文件还没指定语法,导致插件根本收不到信号。多看一眼右下角,比反复重装快十倍。

















