Color Highlight插件不显示色块，首要原因是VSCode内置设置editor.colorDecorators被关闭；需确认其值为true，且远程开发时须在远程端启用，JS/TS字符串高亮还需手动配置color-highlight.languages和正则规则。
Color Highlight 插件装完不显示色块，90% 是 editor.colorDecorators 被关了，不是插件没装好，也不是颜色写错了。
为什么 #ff6b6b 右侧没小色块？先查 editor.colorDecorators
这个设置是 VSCode 底层控制所有颜色装饰（包括色块、下划线、背景高亮）的总开关。Color Highlight 只负责识别颜色，渲染靠它——关了就彻底黑屏。
- 打开设置（
Cmd + ,或Ctrl + ,），搜editor.colorDecorators - 确认值为
true；如果灰色不可点，说明被工作区设置覆盖，需手动在.vscode/settings.json里加一行："editor.colorDecorators": true - 远程开发（SSH/WSL/Containers）时，该设置必须在远程端生效，本地设了无效
- 改完不用重启，但建议重开当前文件或执行
Developer: Reload Window
JS/TS 字符串里 const color = "#4a90e2" 不高亮？配 color-highlight.languages + 正则
插件默认只扫描 CSS/SCSS/HTML 的样式上下文，JS/TS 字符串属于运行时值，必须显式声明语言和匹配规则，否则直接跳过。
- 在
settings.json中配置color-highlight.languages，不能只在 UI 点几下 - language 必须写
"javascript"或"typescript"，不是"js"或"ts" - pattern 要覆盖单引号、双引号、反引号三种字符串写法，例如：
"\"#[0-9a-fA-F]{3,8}\"|'#[0-9a-fA-F]{3,8}'|`#[0-9a-fA-F]{3,8}`" - 老版本不支持
#RGBA（8 位 hex），升级到 v2.5.0+ 才能正确解析#ff6b6b80
Vue/Svelte 文件里 style="color: #f00" 没色块？检查语言模式识别是否准确
Color Highlight 对 <style></style> 块原生支持，但对 <template></template> 中的内联 style 属性，依赖 VSCode 是否把那段 HTML 当作 HTML 处理——不是插件问题，是语言服务识别边界。
- 把光标放在
style="..."内，按Ctrl+Shift+P→ 输入Change Language Mode，确认当前语言模式是html（不是vue或plaintext） - 确保
color-highlight.languages包含"html"，"vue"单独存在也不能替代"html" - 如果用了自定义语言标识（如
lang="postcss"），需额外添加对应 language 条目
最容易被忽略的是：插件识别颜色后，还要经过 VSCode 渲染管线——主题 CSS、显示器色彩配置、甚至系统级色彩管理都可能让预览色块偏灰或透明。别急着调正则，先换一个主流主题（比如 One Dark Pro）快速验证是不是渲染层被覆盖了。
