Color Highlighter插件可在Sublime Text中直接显示颜色值背景，提升前端开发体验。首先通过Package Control安装插件；安装后默认支持#hex、rgb()、hsl()及颜色名称的背景高亮；可选自定义设置包括边框样式、透明度及字符串内高亮；若未生效，需检查文件语法识别、重启软件或手动触发高亮命令。
Sublime Text 的 Color Highlighter 插件可以让你在代码中直接看到颜色值（如 #FF5733、rgb(255, 0, 0)、red 等）的实际颜色背景，提升前端开发体验。下面是详细的使用方法。
1. 安装 Color Highlighter 插件
确保你已经安装了 Package Control（Sublime 的插件管理工具），如果没有，请先安装它。然后按以下步骤操作：
- 按下 Ctrl+Shift+P（Mac 上是 Cmd+Shift+P）打开命令面板
- 输入 Install Package 并选择 “Package Control: Install Package”
- 等待列表加载完成后，搜索 ColorHighlighter
- 点击安装即可
2. 启用颜色高亮功能
安装完成后，插件默认会自动启用对常见颜色格式的高亮，包括：
- #hex 颜色（如 #336699）
- rgb()、rgba() 函数
- hsl()、hsla()
- 预定义颜色名称（如 red、blue、green 等）
你不需要额外设置就能看到效果。只要在 CSS、SCSS、HTML 或其他支持的颜色语境中写入颜色值，背景就会自动高亮显示对应颜色。
3. 自定义配置（可选）
如果你想调整高亮行为，比如开启边框、修改透明度或支持更多语法，可以进行自定义设置：
- 进入菜单栏：Preferences → Package Settings → Color Highlighter → Settings
- 在右侧用户设置中添加配置，例如：
{
"color_highlight_in_strings": true,
"ha_style": "filled", // 可选 filled、outlined、underlined
"supported_color_names": true
}
说明：
- filled：背景完全填充颜色
- outlined：只显示颜色边框
- underlined：底部加色线
- color_highlight_in_strings：在字符串内也高亮颜色（适合 JS 中的样式变量）
4. 常见问题处理
如果颜色没有高亮，请检查以下几点：
- 确认文件语法正确识别（右下角是否为 CSS/SCSS/HTML 等）
- 重启 Sublime Text
- 查看插件是否正常加载（命令面板输入 “ColorHighlighter” 看是否有相关命令）
- 尝试手动触发刷新：命令面板 → “Color Highlighter: Highlight”
基本上就这些。Color Highlighter 能显著提升你在编写样式时的直观感受，尤其适合频繁调色的开发者。不复杂但容易忽略细节，配合适当配置体验更佳。
