color highlight插件默认不支持js/ts字符串中颜色值高亮，需手动配置color-highlight.languages和pattern规则；必须同时启用color-highlight.enable和editor.colordecorators两个开关，且v2.5.0+才支持#rgba格式。
Color Highlight 插件默认只对 CSS/SCSS/HTML 等样式类语言生效，JS/TS 字符串里的 #ff6b6b 或 rgb(255, 107, 107) 不会自动高亮——这不是插件坏了，是它根本没被触发。
确认 colorHighlight.enabled 和 editor.colorDecorators 是否开启
插件不显示色块，第一件事不是重装，而是查两个开关是否关了：
-
color-highlight.enable必须为true（注意不是colorHighlight.enabled，旧版配置名已弃用） -
editor.colorDecorators必须为true，这是 VSCode 底层控制颜色装饰器的总开关，关了整个颜色预览就失效 - 在设置里搜这两个关键词，勾选即可；改完不用重启，但需重新打开文件或按
Cmd+Shift+P→Developer: Reload Window
JS/TS 字符串中颜色值怎么高亮
默认不支持，必须手动加 language + pattern 规则。直接改 settings.json，别只在 UI 设置里点几下：
- 在
color-highlight.languages数组里添加对象，例如：{ "language": "javascript", "pattern": ""#[0-9a-fA-F]{3,8}"|'#[0-9a-fA-F]{3,8}'|"rgb\([^)]+\)"|'rgb\([^)]+\)'" } -
pattern是 JavaScript 正则，双引号要转义，\(和\)才能匹配rgb() - 别漏掉单引号写法，否则
'#3498db'就不会被识别 - 新版插件（v2.5.0+）才支持
#RGBA（8 位 hex），老版本只能匹配{3,6}
色块位置偏、大小糊、透明色显示不对
这些不是 bug，是配置粒度没对上：
-
colorHighlight.size控制色块像素宽高，默认12，设成16更清晰；低于10在高分屏上容易糊 -
colorHighlight.position只接受"left"、"right"、"both"，别填"top"或数字，无效 -
rgba(255, 107, 107, 0.5)显示太淡？不是插件问题，是你的主题背景太亮——换到Dark+主题再试，对比立刻明显 - 如果
#ff6b6b80显示成不透明色块，说明插件版本
Vue/Svelte 文件里 style 标签不生效
新版 Color Highlight 默认支持 Vue 的 <style></style> 和 <template></template> 中的 style="..."，但 Svelte 需额外声明：
- 在
color-highlight.languages中补上"svelte"语言 ID - 确保文件后缀是
.svelte，且右下角语言模式显示为Svelte（不是Plain Text） - 如果用了
<style lang="scss"></style>，还得确认scss在 languages 列表里，否则嵌套语法不识别 - 禁用所有其他颜色类插件（如
Polacode、Colorize），它们会互相覆盖装饰层
真正卡住人的地方，往往不是“怎么配”，而是没意识到：JS 字符串里的颜色、Svelte 的 lang 属性、macOS Display P3 屏幕下的色域偏差……这些都得单独处理，没有一劳永逸的 global 开关。
