Color Highlight 扩展可实现在 VSCode 中为 CSS 等语言的颜色值旁渲染对应颜色小方块；需安装扩展、确认语言模式正确、验证显示效果、按需开启边框增强对比度，并排查禁用或配置冲突问题。
如果您在使用 VSCode 编辑 CSS 或内联样式时，希望直接在代码中看到颜色的视觉预览效果，则可能是由于 Color Highlight 扩展未启用或配置不正确。以下是实现该功能的具体操作步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装 Color Highlight 扩展
Color Highlight 是一个轻量级扩展，它会在 CSS 颜色值（如 #ff0000、rgb(255, 0, 0)、blue、hsl(120, 100%, 50%) 等）旁渲染对应颜色的小方块，无需手动预览即可直观识别。
1、打开 VSCode，点击左侧活动栏中的扩展图标（四个方块组成的图标）。
立即学习“前端免费学习笔记（深入）”；
2、在扩展搜索框中输入 Color Highlight。
3、在搜索结果中找到作者为 sergeche 的扩展，确认名称为 Color Highlight。
4、点击“安装”按钮，等待安装完成。
二、启用颜色高亮功能
安装后该扩展默认启用，但需确保当前文件类型被正确识别为支持颜色语法的语言模式，例如 css、scss、less、html、vue、jsx 等，否则颜色不会被检测和渲染。
1、打开一个包含 CSS 颜色值的文件，例如 style.css 或 index.html。
2、确认右下角状态栏显示的语言模式为 CSS、HTML 或其他支持颜色的关键字语言。
3、若显示为 Plain Text，点击该区域，在弹出菜单中选择对应语言模式。
三、验证颜色方块是否正常显示
Color Highlight 会在颜色文本右侧自动插入一个与之匹配的彩色小方块，该方块尺寸固定，紧贴颜色值末尾，不干扰编辑，且随主题变化保持可读性。
1、在 CSS 文件中输入 background-color: #4a90e2;。
2、观察该行末尾是否出现一个蓝色小方块。
3、尝试修改为 color: rgba(255, 99, 71, 0.8);，确认是否渲染出半透明珊瑚红色方块。
四、调整插件配置以适配深色主题
在深色编辑器背景下，部分浅色系颜色方块可能对比度不足，可通过设置调整方块边框样式，增强可视性。
1、按下 Cmd + ,（Mac）或 Ctrl + ,（Windows/Linux）打开设置界面。
2、在搜索框中输入 color highlight border。
3、找到 Color Highlight: Border 选项，将其值设为 true。
4、重新加载窗口（可通过命令面板输入 Developer: Reload Window 触发）。
五、解决颜色方块不显示的问题
若已安装并启用插件，但颜色值旁仍无方块，常见原因包括语言模式错误、工作区禁用扩展、或存在冲突插件，可按以下方式逐一排查。
1、检查当前工作区是否禁用了该扩展：右键扩展列表中的 Color Highlight，确认未勾选“在工作区中禁用”。
2、关闭所有 VSCode 窗口，重新以干净模式启动：终端执行 code --disable-extensions，再安装并测试 Color Highlight 是否生效。
3、检查 settings.json 中是否存在覆盖配置，如 "colorHighlight.languages" 被设为空数组或排除了当前文件类型。
