Color Highlight 扩展可在 VSCode 中为 CSS、SCSS、LESS 及内联样式中的颜色值渲染对应色块；需安装插件、确认语言模式、自定义支持语言、调整色块尺寸与偏移量。
如果您在 VSCode 中编辑 CSS、SCSS、LESS 或内联样式时，希望颜色值（如 #FF5733、rgb(255, 87, 51)、hsl(12, 100%, 60%)或预定义颜色名如 tomato）能以对应色块直观呈现，则 Color Highlight 扩展可实现该功能。以下是启用并优化该高亮效果的具体操作：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装 Color Highlight 扩展
Color Highlight 是一个轻量级 VSCode 插件，通过语法解析识别各类颜色格式，并在编辑器中渲染为小色块。它支持多种颜色语法，无需额外配置即可生效。
1、打开 VSCode，点击左侧活动栏的扩展图标（四个方块组成的图标）。
2、在扩展搜索框中输入Color Highlight。
3、在搜索结果中找到作者为 sergeche 的扩展，确认发布者为官方认证账户。
4、点击“安装”按钮，等待安装完成提示。
二、启用颜色高亮显示
安装后 Color Highlight 默认启用，但需确保当前文件类型被插件支持。该扩展依赖语言模式判断是否激活高亮逻辑，因此必须正确识别文件语言。
1、打开一个 CSS 文件（如 style.css）或包含颜色声明的 HTML 文件（如 index.html中带有 style 标签或内联 style 属性）。
2、检查右下角状态栏，确认语言模式显示为 CSS、SCSS、HTML 或JavaScript等受支持类型。
3、若状态栏显示为 Plain Text，点击该区域，在弹出菜单中选择对应语言模式。
三、自定义颜色高亮范围
Color Highlight 默认仅高亮标准颜色语法，但可通过用户设置扩展匹配范围，例如支持 CSS 变量中的颜色值或特定注释格式。
1、按下 Cmd + ,（macOS）打开设置界面。
2、在搜索框中输入color highlight languages。
3、点击“在 settings.json 中编辑”，在数组中添加所需语言 ID，例如：“html”, “vue“, “markdown“。
4、保存文件，重启当前编辑器窗口使配置生效。
四、调整色块尺寸与位置
高亮色块默认显示在颜色代码右侧，尺寸为 12×12 像素。可通过修改主题设置微调其外观，适配不同字体大小与行高。
1、进入 VSCode 设置，搜索color highlight background size。
2、找到设置项 Color Highlight: Background Size，将其值改为14 以增大色块。
3、再搜索 color highlight background offset，将Color Highlight: Background Offset 设为2，使色块更贴近文本基线。
