如果您在VSCode中编辑CSS、SCSS、Less或内联样式时，希望颜色值（如#ff0000、rgb(255, 0, 0)、hsl(0, 100%, 50%)、blue等）能实时以对应色块形式高亮显示，则Color Highlight插件可直接满足该需求。以下是启用并优化该插件功能的具体操作步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装Color Highlight插件
Color Highlight是一个轻量级开源插件，不依赖其他扩展，安装后即可自动识别标准颜色语法并渲染色块。它支持十六进制、RGB/RGBA、HSL/HSLA、预定义颜色名称及部分CSS自定义属性中的颜色值。
1、打开VSCode，点击左侧活动栏的扩展图标（四个方块组成的图标）。
2、在扩展搜索框中输入Color Highlight，确认作者为sergeche且安装量超过200万。
3、点击“安装”按钮，安装完成后点击“重新加载”使插件生效。
二、启用插件自动高亮功能
插件默认启用，但需确保VSCode语言模式正确识别当前文件类型，否则颜色代码可能无法被解析。例如，.html文件中的style标签、.css文件、.scss文件均受支持，而纯文本文件或未指定语言的文件则不会触发高亮。
1、打开一个包含颜色代码的文件，如style.css或index.html。
2、右下角状态栏检查当前语言模式是否为CSS、HTML、SCSS或Less；若显示“Plain Text”，点击该区域并选择对应语言。
3、确认颜色值旁已出现微小色块，如#3498db。
三、自定义高亮样式与范围
Color Highlight允许通过设置调整色块尺寸、透明度、是否显示边框及支持的颜色语法范围，以适配不同编辑习惯和主题对比度。
1、按下Cmd+,（macOS）打开设置界面，切换至“扩展”→“Color Highlight”。
2、找到colorHighlight.colors设置项，点击铅笔图标进入JSON编辑模式。
3、在数组中添加新规则，例如：
{"pattern": "var\\(--primary-color\\)", "color": "var(--primary-color)"}
4、修改colorHighlight.showColorsInComment为true，使注释中颜色代码（如// #ff6b6b）也渲染色块。
四、解决色块未显示问题
当颜色值存在但无色块渲染时，常见原因包括语言模式错误、正则匹配失效或插件冲突。以下方法可独立排查并恢复高亮。
1、关闭所有VSCode窗口，重新以code --disable-extensions命令启动，再仅启用Color Highlight测试是否生效。
2、在设置中将colorHighlight.languages数组手动补充缺失语言ID，例如添加"plaintext"或"vue"。
3、检查当前主题是否禁用了装饰（Decorations），前往设置搜索editor.decorations，确认其值为true。
五、禁用特定文件或文件夹的高亮
对于大型项目中无需颜色预览的配置文件或生成文件（如dist/*.css），可通过排除路径避免性能损耗或视觉干扰。
1、打开VSCode设置，搜索colorHighlight.exclude。
2、点击“在settings.json中编辑”，在数组中添加路径模式，例如："**/dist/**/*.css"。
3、添加后保存文件，重启VSCode使排除规则生效。
