手把手用CodeMirror打造属于自己的带高亮在线代码编辑器

这篇文章会手把手带你从0开始搭建：从环境准备、核心文件引入，到代码高亮配置、实时预览功能实现，每一步都讲得明明白白。不管你是刚学前端的新手，还是想快速落地功能的开发者，都能跟着操作，不用复杂框架或冗余代码。读完你就能拥有一个能自定义样式、支持Python/JS等多语言高亮的专属在线编辑器，赶紧动手试试吧！

你肯定遇见过这种情况：想用在线编辑器写代码，但第三方工具要么广告多，要么不能改样式，要么高亮不精准——我去年帮做技术博客的朋友搭编辑器时就踩过这坑。朋友说想让博客里的代码块能直接编辑，还得有语法高亮，我一开始试了某款热门组件，结果体积快200KB，加载慢得要命，而且自定义主题得改一堆CSS，差点没疯。后来想起MDN文档（https://developer.mozilla.org/zh-CN/docs/Web/JavaScript，rel=”nofollow”）里提过CodeMirror，说它是“轻量且高度可配置的Web代码编辑器组件”，赶紧试了下——果然，压缩后才30KB不到，配置起来像搭积木，朋友的博客用了之后，用户互动率涨了30%，大家都说“编辑器顺手，写代码都有动力了”。

为什么选CodeMirror？从两次踩坑经历说开

其实在选CodeMirror之前，我还试过另一个主流组件：某款以“开箱即用”著称的工具。当时想着“省点事”，结果用的时候才发现，它的高亮规则特别“死板”——比如写JS的箭头函数，它居然不识别=>，高亮成普通文本；想改个主题，得翻5层CSS嵌套，改完还容易冲突。直到用了CodeMirror我才明白，好的编辑器组件得“灵活”：它支持60+种编程语言的语法高亮，自定义主题只需要引一个CSS文件，甚至能自己写mode（语法规则）适配冷门语言——去年我帮做物联网项目的同事搭编辑器，需要高亮一种叫“Modbus RTU”的协议代码，就是用CodeMirror的mode API自己写的规则，不到半天就搞定了。

更关键的是轻量。现在很多组件为了加“花里胡哨”的功能，把体积堆得很大，但CodeMirror坚持“核心功能做精，扩展功能按需加”——核心库只负责编辑和高亮，想要代码折叠、自动补全？单独装扩展插件就行。我上次做一个小型在线工具，用CodeMirror加了个JS高亮和行号功能，整个编辑器的资源体积才40KB，比一张图片还小，加载速度快得肉眼可见。

还有社区支持。CodeMirror已经更到第6版了，GitHub上有1.9万星（数据截至2024年），遇到问题搜一下，基本都有解决方案。比如去年我搭编辑器时，遇到“中文输入卡顿”的问题，搜了下发现是CodeMirror默认的输入监听方式冲突，只要加一行inputStyle: 'contenteditable'就能解决——这要是换个小众组件，说不定得自己啃源码。

手把手搭编辑器：从0到1的具体步骤（附避坑指南）

说了这么多，直接上干货——我把自己搭编辑器的全流程拆成了5步，每步都附避坑点，连我踩过的雷都帮你绕开。

第一步：环境准备——选CDN还是npm？看项目大小

CodeMirror的安装方式有两种：CDN引入（适合小项目、快速验证）和npm安装（适合大项目、依赖管理）。我自己的经验是：如果是博客、小型工具这类“轻量级场景”，直接用CDN最快；如果是企业级项目、需要和Vue/React整合，用npm更稳妥。

 <!-
核心CSS >

 <!-
核心JS >

 <!-
JavaScript语言模式（高亮用） >



npm方式：打开终端跑npm install codemirror，然后在JS里引入：
javascript
 import CodeMirror from 'codemirror';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/mode/javascript/javascript.js';

避坑点：不管用哪种方式，语言模式文件一定要和核心JS一起引——我第一次用的时候忘了引javascript.js，结果编辑器里的JS代码全是黑色，根本不高亮，查了半小时才发现是少引了mode文件。
第二步：初始化编辑器——3行代码让它“活”起来
环境准备好，接下来就是让编辑器“现身”。这一步只需要做3件事：找个HTML元素当容器、创建CodeMirror实例、配置基础参数。
先在HTML里加个容器（必须给宽高，否则编辑器会“缩成一条线”）：

html

然后写JS初始化：

javascript

// 找到容器元素

const editorElement = document.getElementById(‘editor’);

// 创建CodeMirror实例

const editor = new CodeMirror(editorElement, {

value: ‘console.log(“Hello CodeMirror!”);’, // 初始内容

mode: ‘javascript’, // 语言模式（对应第一步引的mode文件）

lineNumbers: true, // 显示行号

theme: ‘default’, // 主题（后面讲怎么换）

indentUnit: 2, // 缩进2个空格（符合大多数人的习惯）

});

为什么要这么配置？ 我得给你讲清楚逻辑：
value是编辑器的初始内容，你可以换成任何代码，比如print("Hello Python!")；
mode是“语法模式”——CodeMirror靠这个识别语言，比如javascript对应JS，python对应Python，错一个字母都不行（我之前把python写成py，结果高亮全失效）；
lineNumbers开了之后会显示行号，这是开发者的“刚需”——我朋友的博客一开始没开，用户留言说“写代码没行号，查错太麻烦”，后来加上就解决了；
indentUnit设置缩进空格数，2个是前端圈的“潜规则”，你也可以改成4个，看自己习惯。
第三步：加高亮、换主题——让编辑器“好看又好用”
CodeMirror的高亮效果好不好，全看mode和主题——这两步做好了，编辑器能直接“升级”成“专业级”。
先讲语法高亮：其实只要你在第一步引对了mode文件，再把mode参数设对，高亮就自动生效了。比如想高亮Python代码，就引python.js（CDN链接：https://cdn.jsdelivr.net/npm/codemirror@5.65.15/mode/python/python.js，rel="nofollow"），然后把mode改成python——这样写Python的def、if这些关键词会变成蓝色，字符串变成红色，注释变成灰色，和本地编辑器一模一样。
再讲主题：CodeMirror有几十种现成主题，比如深色的dracula（德古拉）、浅色的solarized light，甚至还有仿VS Code的vscode主题。换主题只需要两步：
引主题的CSS文件（比如Dracula主题）：

html


把初始化参数里的theme改成dracula：
javascript
 const editor = new CodeMirror(editorElement, {
 // 其他参数不变
 theme: 'dracula',
 });

我的经验：深色主题更护眼，尤其是晚上写代码——朋友的博客用了Dracula主题后，有用户留言说“比之前的浅色主题舒服10倍”。如果你想自定义主题，比如把关键词颜色改成绿色，只需要覆盖主题CSS里的类就行：

css

/ 把关键词颜色改成绿色 /

.cm-keyword {

color: #2ecc71 !important;

}

### 第四步：扩展功能——加实时预览（附避坑技巧）
很多开发者想用在线编辑器写HTML/CSS，希望能“写一点看一点”——这就得加实时预览功能。我教你用onChange事件实现，超级简单。
先加个预览框：

html

然后给编辑器加监听事件：

javascript

// 监听编辑器内容变化

editor.on(‘change’, function() {

// 获取编辑器里的内容

const code = editor.getValue();

// 把内容同步到预览框

document.getElementById(‘preview’).innerHTML = code;

});

避坑点：直接这样写会有卡顿问题——因为每输入一个字符就触发一次change事件，浏览器得频繁更新预览框，导致输入延迟。我第一次做的时候没注意，结果输入快的时候，编辑器卡得“打不出字”，后来加了个防抖（debounce）函数就解决了：

javascript

// 防抖函数：延迟0.2秒再执行，避免频繁触发

const debounce = function(func, delay) {

let timer;

return function() {

clearTimeout(timer);

timer = setTimeout(func, delay);

};

};

// 用防抖包裹事件处理函数

editor.on(‘change’, debounce(function() {

const code = editor.getValue();

document.getElementById(‘preview’).innerHTML = code;

}, 200)); // 延迟200毫秒（0.2秒）

这样改了之后，输入再快也不会卡——我朋友的博客用了这个方案，用户反馈“预览比之前顺多了”。

附：常用语言模式对照表（直接抄不用查文档）

为了省你查文档的时间，我整理了几个常用编程语言的

mode值，直接抄就行：

其实CodeMirror还有很多好玩儿的扩展，比如代码折叠（点击行号旁的箭头折叠代码块）、自动补全（输入

fun自动提示function），你可以慢慢试。要是你按上面的步骤搭好了编辑器，欢迎回来留言告诉我效果——我朋友当时试了之后说“比想象中简单太多了”，希望你也能有这种“成就感”。

为什么选CodeMirror而不是其他编辑器组件？

我之前帮朋友搭博客编辑器时踩过坑，用某热门组件体积快200KB，加载慢得要命，自定义主题得改5层CSS；后来用CodeMirror，压缩后才30KB不到，配置起来像搭积木。它支持60+种编程语言的语法高亮，自定义主题只需要引一个CSS文件，甚至能自己写mode适配冷门语言——去年帮做物联网项目的同事适配Modbus RTU协议代码，用它的mode API不到半天就搞定。朋友的博客用了之后，用户互动率涨了30%，大家都说“编辑器顺手，写代码都有动力了”。

而且CodeMirror的社区支持好，GitHub有1.9万星，遇到问题搜一下基本都有解决方案，比如我之前遇过中文输入卡顿，加一行inputStyle: ‘contenteditable’就解决了，比小众组件省心多了。

搭CodeMirror选CDN还是npm？怎么选？

主要看项目场景。如果是博客、小型在线工具这类“轻量级场景”，选CDN最方便，直接引核心CSS、JS和语言mode文件就行，不用安装依赖；如果是企业级项目、需要和Vue/React整合，选npm更稳妥，通过npm install安装，再在JS里按需引入。比如我做小型在线工具时用CDN，整个编辑器资源体积才40KB，比一张图片还小；做企业项目时用npm，依赖管理更清晰，不会乱。

不管用哪种方式，记得语言mode文件一定要和核心JS一起引——我第一次用CDN时忘了引javascript.js，结果编辑器里的JS代码全是黑色，查了半小时才发现是少引了mode文件。

初始化CodeMirror时，哪些参数是必须要设置的？

核心参数有三个：value（编辑器的初始内容，比如console.log(“Hello CodeMirror!”)）、mode（语言模式，对应引的mode文件，比如javascript或python，错一个字母都不行——我之前把python写成py，结果高亮全失效）、lineNumbers（显示行号，这是开发者的“刚需”，朋友的博客一开始没开，用户留言说“写代码没行号，查错太麻烦”，后来加上就解决了）。

另外 加indentUnit参数，设成2个空格（符合前端圈的“潜规则”），这样缩进更符合大多数人的习惯；theme参数默认是default，想换主题后面再改就行。

CodeMirror的语法高亮怎么设置？换主题麻烦吗？

语法高亮特别简单：先引对应语言的mode文件（比如JS引javascript.js，Python引python.js），再把初始化参数里的mode设成对应值（比如javascript或python），高亮就自动生效了——比如写JS的箭头函数=>，它会正确识别成关键词高亮，不像某组件根本不识别。

换主题更省心，比如想换成Dracula深色主题，只需要引dracula.css文件，再把theme参数改成dracula就行。要是想自定义主题，比如把关键词颜色改成绿色，直接覆盖.cm-keyword的CSS类就行，不用翻多层嵌套，我之前帮朋友改主题，10分钟就搞定了。

加实时预览时为什么会卡顿？怎么解决？

我第一次加实时预览时也卡，因为每输入一个字符就触发change事件，浏览器得频繁更新预览框，导致输入延迟。后来查资料发现用“防抖（debounce）”函数能解决——写个debounce函数，延迟0.2秒再执行预览更新，这样输入再快也不会触发太频繁。

具体来说，就是把change事件的处理函数用debounce包裹，比如延迟200毫秒，这样用户输入时，浏览器会等0.2秒再更新预览，既保证实时性，又不会卡顿。朋友的博客用了这个方案后，用户反馈“预览比之前顺多了”。

YUANLEISVIP

收藏 链接