codemirror是目前最流行的在线编辑器插件，本文主要是罗列codemirror提供的所有主题效果，如果你需要使用codemirror制作一个在线编辑器，可以参考本文选择一个喜欢的主题。
本文使用的目标对象是vue，其他语言或框架也是类似的。为了减小纵向篇幅，这里使用了三个codemirror，分别展示template、script和style的效果。
codemirror是目前最流行的在线编辑器，本文主要是罗列codemirror提供的所有主题效果，如果你需要使用codemirror制作一个在线编辑器，可以参考本文选择一个喜欢的主题。本文使用的目标对象是vue，其他语言或框架也是类似的。为了减小纵向篇幅，这里使用了三个codemirror，分别展示template、script和style的效果。1. 3024-day2. 3024-night3. abcdef4. ambiance-mobile5. ambiance6. ayu
var
codemirror
= require ( '
codemirror
-inject' ) ;
var el = document . getElementById ( 'editor' ) ;
// loads the base styling for
codemirror
and mounts an instance in the given el
var editor =
codemirror
( el , {
mode : 'javascript' , // will load the `javascript` syntax mode
theme
: 'monokai' // will load the `monokai`
theme
} ) ;
麻省理工学院
npm install
codemirror
下载组件
引入核心配置包
import * as
CodeMirror
from '
codemirror
/lib/
codemirror
'
import '
codemirror
/lib/
codemirror
.css'
引入后在html界面中建立textarea标签，用于生成代码框
<textarea class="form-control" id="code" name="code"></textar
可以查看官网演示：
vue
-
codemirror
| Homepage支持的语言mode：
CodeMirror
: Language Modes 支持的
主题
样式：
CodeMirror
:
Theme
Demo 开始安装和使用：
注册全局组件
注册局部组件
实现的
效果
： 编辑器默认高度是300px，如果想更改高度和字体大小：添加样式
更改
主题
的时候，需要先引入相应的
主题
样式:然后再更改
主题
：实际
效果
：
CodeMirror
是一款在线的支持语法高亮的代码编辑器，现在已有封装的react版本（react-
codemirror
）可以直接使用。
Codemirror
资源文件中，lib下是放的是核心库和核心css，mode下放的是各种支持语言的语法定义，
theme
目录下是支持的
主题
样式。
使用
codemirror
实现在线代码编辑器主要包括的功能是：
1、实现自动提示
2、 关键词高亮与自定义
theme
...
codemirror
/lib/
codemirror
是
CodeMirror
编辑器的核心库。
CodeMirror
是一个用JavaScript编写的基于浏览器的代码编辑器，提供了许多功能和扩展性，可以嵌入到网页中。
该库包含了
CodeMirror
编辑器的核心代码，如编辑器的初始化、文本处理、事件处理、模式匹配、语法高亮等功能。它还提供了许多内置的编辑器模式（如JavaScript、HTML、CSS等），以及丰富的API，允许开发人员根据需求进行定制和扩展。
通过引入
codemirror
/lib/
codemirror
库，开发人员可以轻松地在网页中集成
CodeMirror
编辑器，并使用其丰富的功能来实现代码编辑和展示的需求。
