为什么 pigments 不显示颜色块？
不是所有 CSS 颜色写法都能被识别——pigments 默认只解析标准颜色关键字（如 red、transparent）、十六进制（#fff、#ffffff、#f3a）、RGB/RGBA（rgb(255,0,0)、rgba(0,0,0,0.5)）和 HSL/HSLA（hsl(0,100%,50%)）。它不支持 CSS 变量（var(–primary)）、自定义函数（color-mod()）或未加引号的字符串拼接（如 "#"+color）。
常见错误现象：
CSS 中写了 background: #ff0000; 却没高亮 → 检查是否在 .css、.scss、.less 等被 pigments 支持的语法作用域内（.html 里 style 标签默认支持，但内联 属性不支持）SCSS 文件中用了 $primary: #3498db;，但后续 color: $primary; 没渲染 → pigments 不解析变量引用，只渲染字面量值安装后重启 Atom 仍无反应 → 确认插件已启用（Settings → Packages → 搜索 pigments → 点击 Enable）
如何让 pigments 支持更多语法？
默认只开箱支持 CSS/SCSS/LESS/Less，但可通过配置扩展到其他文件类型（比如 Vue 单文件组件、Markdown 表格里的颜色代码、甚至 JS 字符串中的颜色值）。
实操建议：
打开 Settings → Packages → 找到 pigments → 点击 Settings修改 Supported Grammars：添加 source.css.vue（Vue SFC 的 style 块）、text.html.basic（HTML 中的 <style>）、source.js（若需高亮 JS 里类似 ctx.fillStyle = "#f00" 这类赋值）注意：开启 source.js 后，所有 JS 字符串都会被扫描，可能轻微拖慢大文件响应；建议搭配 Ignore Scopes 排除干扰，例如填入 string.quoted.other（避免匹配注释里的假颜色）
pigments 和 highlight-selected 冲突怎么办？
两者都依赖光标位置做实时渲染，叠加使用时偶尔出现颜色块闪烁、选中文字变色异常、甚至 Atom 卡顿。这不是 bug，而是 Atom 渲染层对高频 DOM 更新的调度限制。
解决路径很直接：
优先保留 pigments，禁用 highlight-selected 的「Highlight on Right Click」选项（Settings → Packages → highlight-selected → 取消勾选）或改用更轻量的替代方案：装 minimap-highlight-selected（仅在 minimap 小地图中标记，不影响主编辑区）如果必须同时高亮颜色+变量，建议把 pigments 的 Marker Type 改为 dot（Settings → Packages → pigments → Marker Type 选 dot），比 outline 或 background 性能更好
为什么 SCSS 里嵌套规则的颜色不显示？
比如这段代码：.btn { &–primary { background: #007bff; }}中 #007bff 依然会高亮——pigments 解析的是 token 字面量，跟嵌套层级无关。真正影响识别的是语法 scope 是否正确。
容易被忽略的点：
确认你用的是官方 language-sass（而非旧版 language-scss 或第三方语法包），否则 SCSS 嵌套结构可能被解析为纯文本，导致 color token 丢失检查文件后缀：SCSS 必须是 .scss，Sass（缩进语法）必须是 .sass；混用后缀（如 .css 里写 SCSS 语法）会导致整个文件 fallback 到 source.css，而该 scope 不支持嵌套解析若用 VS Code 用户迁移过来，注意 Atom 没有“CSS-in-JS”原生支持，styled-components 或 emotion 字符串里的颜色需手动在 Supported Grammars 加 source.js.jsx 并配好 Ignore ScopesAtom 对颜色的感知始终基于语法解析器输出的 token 流，不是正则硬匹配；所以哪怕写法完全合法，只要 scope 错了，pigments 就看不见。
评论(0)