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，使色块更贴近文本基线。