SQL关键字颜色不生效的根源是模式未正确加载，需显式启用sql模式并确保路径、注册方式与CodeMirror版本匹配，否则词法分析失败导致class缺失。
SQL 关键字颜色不生效？先检查 sql 模式是否正确加载
codemirror 默认不会自动识别 .sql 文件或 <textarea></textarea> 中的 sql 内容，必须显式启用 sql 模式（不是 text/x-sql 或旧版 sql.js 路径）。如果只改了主题但关键字还是灰色，大概率是模式没挂上。
实操建议：
- 确认加载了
mode/sql/sql.js（v5）或@codemirror/lang-sql（v6），路径写错、漏加载都会导致 tokenization 失败 - v5 中需调用
CodeMirror.defineMode('sql', ...)后再用mode: 'sql'；v6 必须通过javascriptLanguage().configure({name: 'sql'})或sql()插件注册语言支持 - 用浏览器 DevTools 查看编辑器 DOM：若
<span class="cm-keyword"></span>根本没出现，说明词法分析没跑，主题再好看也没用
怎么让 SELECT 和 WHERE 显示不同颜色？靠 CSS 类名精准覆盖
CodeMirror 的 SQL 模式会为不同语法成分打上固定 class，比如 SELECT 是 cm-keyword，WHERE 也是——它们默认共享样式。想区分，不能靠“改主题”，得直接干预 CSS 选择器。
实操建议：
- 优先用
.cm-s-your-theme .cm-keyword兜底，再叠加属性选择器：.cm-s-your-theme .cm-keyword[title="SELECT"]（前提是 mode 里配置了title属性，多数 SQL mode 不提供） - 更可靠的方式：在 mode 初始化时注入自定义 token 类型，例如把
SELECT标记为cm-reserved-word，然后单独写.cm-reserved-word { color: #ff6b6b; } - 注意 v6 的 class 命名变了：
cm-keyword→cm-atom（部分字面量）、cm-property（函数名），得用EditorView.baseTheme查实际生成的类
v5 升 v6 后 SQL 高亮全乱了？主题迁移要重写 CSS 规则
v6 彻底抛弃了 cm-s-*. 主题前缀和全局 class 命名，所有样式都走 baseTheme 或 highlightStyle API，直接拷贝老 CSS 文件必失效。
实操建议：
- 别再写
.cm-s-dracula .cm-keyword，改用EditorView.baseTheme注入对象：{ '.cm-keyword': { color: '#8be9fd' } } - SQL 特有 token 如函数名（
COUNT、AVG）在 v6 中常归为cm-function，而 v5 可能是cm-builtin，得对照@codemirror/lang-sql源码确认 - 如果用了第三方主题包（如
codemirror-theme-solarized），它可能根本不支持 SQL 扩展，得手动 merge 自定义规则
为什么改了颜色但字符串里的 SQL 不高亮？语言嵌套没配对
常见场景：Vue 模板中 <template><pre class="brush:php;toolbar:false;" v-html="sql"></pre></template>，或 JS 字符串里拼 SQL。CodeMirror 不会自动解析 HTML 或 JS 字符串内部内容——它只高亮当前 mode 对应的顶层文本。
实操建议：
- JS 中写 SQL 字符串，要用
javascriptLanguage().addExtraLanguage(sql())（v6）或CodeMirror.multiplexingMode（v5）显式声明嵌套 - Vue/React 项目里，确保 CodeMirror 实例绑定的是纯 SQL 字符串，而不是被框架转义过的 HTML 片段
- 调试技巧：临时把 SQL 内容贴到独立的
<textarea mode="sql"></textarea>里测试，排除框架干扰
真正麻烦的从来不是换颜色，而是搞清哪一层 parser 在干活、哪一层 theme 在接管、哪一层 DOM 实际渲染了什么 class——三者断一环，就白调。
