应将语法着色变量定义在主题 class 内（如 .theme-dark），而非 :root，以实现主题隔离；变量名需语义化（如 --hl-string），并在 token 选择器中通过 var(--hl-string) 引用，确保祖先容器承载主题 class 以触发继承更新。
怎么用 CSS 自定义属性定义语法着色变量集
直接定义一套可被 color、background-color 等引用的语义化变量，比硬写颜色值更可控。关键不是“能不能换”，而是变量名是否对应真实语法角色（比如 --hl-string 专用于字符串，而不是 --color-2 这种无意义编号）。
推荐按语言通用 token 类型建模，例如：
:root {
--hl-keyword: #d73a49;
--hl-string: #032f62;
--hl-comment: #6a737d;
--hl-function: #6f42c1;
--hl-tag: #22863a;
--hl-attr: #e36209;
--hl-punctuation: #586069;
}
这些变量不绑定具体元素，只表达“这个语义该是什么色”。后续在 .token.string 或 code span[data-token="string"] 中复用即可。
如何让不同主题共存且不互相污染
靠 CSS 作用域隔离：把变量挂到带主题 class 的容器上，而不是全局 :root。否则切换主题时得手动重写全部变量，极易漏项或覆盖错。
立即学习“前端免费学习笔记（深入）”；
正确做法是：
- 每个主题用独立 class，如
.theme-dark、.theme-hybrid - 变量定义在对应 class 内部，例如
.theme-dark { --hl-string: #96cbfe; } - 高亮 HTML 结构必须有顶层容器承载主题 class，如
<pre class="theme-dark"><code>...</code></pre>
这样切换主题只需改容器 class，所有子元素自动继承新变量值，无需 JS 遍历重设样式。
为什么 inline 样式或 style 标签里写变量会失效
因为 CSS 自定义属性遵循层叠规则，而 style 属性和 <style></style> 标签内声明的变量，若未显式挂载到有效作用域（如某个 class 或伪类），会被浏览器忽略或无法被后代继承。
常见翻车点：
- 在
<style>.token { --hl-string: red; }</style>里定义 —— 变量只对.token元素自身生效，其子元素拿不到 - 用 JS 直接
el.style.setProperty('--hl-string', 'blue')却没确保 el 是高亮块的根容器 - 变量定义在
:root，但主题切换时只改了子元素 class，没同步更新 :root 的值 → 实际没变
记住：变量必须定义在祖先元素上，且该祖先要包裹所有需响应变化的高亮节点。
Prism.js / Highlight.js 里怎么对接 CSS 变量
这两库默认输出的是带 class 的 HTML（如 <span class="token string">"hello"</span>），它们不生成内联样式，所以你完全可以用 CSS 变量接管着色逻辑。
实操要点：
- 禁用插件自带的 CSS 主题（如 Prism 的
prism-okaidia.css），避免 class 冲突 - 给
.token.string这类选择器设置color: var(--hl-string); background: var(--hl-string-bg, transparent); - 如果库输出的 class 名不统一（如 Highlight.js 用
hljs-string），就按它的实际 class 写对应规则，别强行套 Prism 的命名 - 注意部分 token（如正则 flag、JS 模板插值）可能需要额外 class 或 data 属性辅助区分，这时用
[data-token="template-string"]更可靠
变量本身不解决 token 划分问题，它只是着色的“颜料”——词法分析仍由高亮库完成，CSS 只负责把结果画出来。
最易被忽略的是：变量值变更后，浏览器不会强制重绘已渲染的 code 块，除非触发样式重计算。所以主题切换后，建议对代码容器触发一次 getComputedStyle(el).color 或简单加个 class 再移除，确保更新生效。
