嘿，我来帮你搞定这个CodeMirror代码高亮的问题！结合你给出的技术栈（TypeScript+Webpack）和现有配置，大概率是样式引入或者Webpack规则的细节没处理到位，下面一步步来排查解决：

1. 先确认依赖安装完整 #

首先得确保你已经装了CodeMirror核心包和TypeScript类型定义，要是还没装，先跑这个命令：

npm install codemirror @types/codemirror --save

@types/codemirror是给TypeScript用的类型声明文件，缺了它写代码时会有一堆类型报错，必须安排上。

2. 调整Webpack配置（确保能处理CodeMirror的样式） #

你现有的CSS Loader配置本身没问题，但要注意不要把node_modules里的CodeMirror样式排除在外。如果你的Webpack规则里加了exclude: /node_modules/，那得修改成不排除codemirror目录，比如：

rules: [
  {
    test: /\.css$/,
    // 排除node_modules，但codemirror的css要例外
    exclude: /node_modules\/(?!codemirror)/,
    use: [
      require.resolve('style-loader'),
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 1,
          url: false,
        },
      },
    ],
  }
  // 其他规则...
]

如果原本就没加exclude，那这一步可以跳过，直接往下走。

3. 正确引入CodeMirror的样式和语言模式 #

在你的入口文件（比如index.ts）或者使用CodeMirror的组件里，必须引入核心样式、主题样式，以及你需要的语言高亮模式：

// 引入CodeMirror核心基础样式
import 'codemirror/lib/codemirror.css';
// 选一个你喜欢的主题样式（比如monokai）
import 'codemirror/theme/monokai.css';
// 引入你需要的语言模式（比如JavaScript，TypeScript的话要引入typescript模式）
import 'codemirror/mode/javascript/javascript';
// 如果是TypeScript代码高亮，还要加这个：
// import 'codemirror/mode/typescript/typescript';

4. 初始化CodeMirror实例（TypeScript写法） #

最后在你的页面里初始化编辑器，注意要对应好之前引入的主题和模式：

import * as CodeMirror from 'codemirror';

// 获取页面上的编辑器容器DOM
const editorContainer = document.getElementById('code-editor');

if (editorContainer) {
  // 初始化CodeMirror
  const editor = CodeMirror(editorContainer, {
    value: '// 这里放你的代码片段\nconsole.log("Hello CodeMirror!");',
    mode: 'javascript', // 要和你引入的语言模式名称一致
    theme: 'monokai', // 要和你引入的主题名称一致
    lineNumbers: true, // 显示行号
    lineWrapping: true, // 自动换行
  });
}

常见问题排查 #

• 样式没生效？：检查是否漏引了核心样式或主题样式，Webpack是否能正确处理node_modules里的codemirror/css文件。
• 语法高亮不生效？：确认你引入了对应语言的mode文件，并且初始化时mode选项的名称完全匹配（比如TypeScript是typescript，不是ts）。
• TypeScript报错？：确保@types/codemirror已经安装，导入方式用import * as CodeMirror from 'codemirror'，不要用默认导入。

内容的提问来源于stack exchange，提问作者Kalai