在 CodeMirror 6（以下简称 CM6）里折腾代码高亮，确实是件挺头大的事。它的架构跟老版本完全不一样了——高亮功能需要语言包配合 Lezer 解析树才能工作，中间哪一步配置不对，高亮就是不显示。

如果不打算继续跟 CM6 的配置死磕，下面这两个替代方案可以试试。

🔥 方案一：Shiki + CM6（最推荐）

如果你只是想展示代码（比如在预览区），而不是在编辑区实时高亮，Shiki 是最简单的选择——它的高亮效果和 VS Code 完全一致，配置比 CM6 简单得多。

安装就一行：

npm install shiki

使用也极其简洁：

import { getHighlighter } from 'shiki'

const highlighter = await getHighlighter({ theme: 'github-dark' })
const code = `function hello() { console.log('Hello') }`
const html = highlighter.codeToHtml(code, { lang: 'javascript' })

document.getElementById('preview').innerHTML = html

如果你想保留 CM6 的编辑功能（快捷键、选择、撤销等），又想要 Shiki 的高亮效果，CM6 官方论坛有一个成熟方案：用 Shiki 做语法高亮，代替 CM6 自带的 Lezer 高亮器。具体做法就三步：

  1. 正常加载 CM6 编辑器
  2. 不要添加 syntaxHighlighting() 扩展
  3. 用 EditorView.contentAttributes 或装饰器把 Shiki 生成的高亮样式应用到编辑器

Shiki 的局限是它不负责智能提示、自动补全这些高级功能，但单纯做高亮来说完全够用了。

⚡ 方案二：换 Scintilla 原生控件

如果前端这套 Web 配置让你头疼到不行，可以换个思路——换一个不是基于 Web 技术的编辑器控件。

Scintilla 是一个纯 C++ 写的编辑控件，语法高亮、代码折叠这些基础功能都做得很好，性能很轻量。通过它的 API 启用高亮也很直接：

SCI_SETLEXER(SCLEX_CPP);  // 设置为 C++ 语法
SCI_SETSTYLEBITS(5);

适用场景：如果你愿意把项目从纯 Web 转向 Qt + QScintilla（Scintilla 的 Qt 封装版），可以得到原生级别的高性能和稳定的高亮效果。代价是需要学习 Qt 框架，放弃前端的灵活性。

📊 三种方案对比

方案 实现难度 高亮质量 推荐场景
继续折腾 CM6 中等 好（Lezer 解析） 有精力研究 Lezer 语法树
Shiki + CM6 低 极好（VS Code 级别） 🎯 最推荐，平衡了效果和开发效率
换 Scintilla 高（需换框架） 好 愿意放弃 WebView，追求原生性能

我的建议是：先试试 Shiki 替代 CM6 高亮器 这个方案，大概率能解决问题，而且不用推翻现有架构。只需要在项目里装个 shiki，去掉 syntaxHighlighting 扩展就行了。

💬 对话原文来自 DeepSeek 共享对话

文章目录