CodeMirror 是一款“Online Source Editor”，基于Javascript，短小精悍，实时在线代码高亮显示，他不是某个富文本编辑器的附属产品，他是许多大名鼎鼎的在线代码编辑器的基础库。
GIT代码
https://github.com/codemirror/CodeMirror
官网
https://codemirror.net/
可以看出，CodeMirror的作者是一个十分向往自由的人。但他的CodeMirror绝对不简单，看看下面这份清单：
Google Earth KML sampler
Eloquent JavaScript's console
The qooxdoo playground
A cool tutorial about the element
An online IDE for the Orc programming language
Google's API playground
Raphaël Live
JS Bin
The RokPad plugin for Joomla
The scraperwiki editor
jsLinb UI Builder
上述的这些在线代码编辑器都是基于CodeMirror的，是不是感到惊讶，里面有你熟悉的JS Library。
CodeMirror本身的定位也很明确，短小精悍，但代码质量很高，在Google Group的群里面，人们热烈的进行着用CodeMirror做各式各样改造的讨论，可见对他的欢迎。以下有各种不同语言的Demo演示：
JavaScript
XML/HTML
CSS
SPARQL
HTML mixed-mode
HTML+PHP mixed-mode (courtesy of Yahoo!)
Python (by Timothy Farrell)
Lua (by Franciszek Wawrzak)
Ruby (by Michal Hantl, unfinished)
SQL (by John Benediktsson)
PLSQL (by Peter Raganitsch)
diff (courtesy of Liran Nuna)
Groovy (by eXo Platform)
C# (by Boris Gaber and Christopher Buchino)
OmetaJS (by Eric KEDJI)
Scheme (by Danny Yoo)
按照官网示例，我们增加对于JAVA代码的支持：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>codemirror代码编辑</title>
<!-- codemirror代码编辑 -->
<link rel="stylesheet" href="codemirror-5.52.0/lib/codemirror.css">
<script src="codemirror-5.52.0/lib/codemirror.js"></script>
<!-- html代码高亮显示 -->
<script src="codemirror-5.52.0/mode/xml/xml.js"></script>
<script src="codemirror-5.52.0/mode/css/css.js"></script>
<script src="codemirror-5.52.0/mode/javascript/javascript.js"></script>
<!-- Java代码高亮显示 -->
<script src="codemirror-5.52.0/mode/clike/clike.js"></script>
<!-- 引入css支持主题 -->
<link rel="stylesheet" href="codemirror-5.52.0/theme/dracula.css">
<!--支持代码折叠-->
<link rel="stylesheet" href="codemirror-5.52.0/addon/fold/foldgutter.css"/>
<script src="codemirror-5.52.0/addon/fold/foldcode.js"></script>
<script src="codemirror-5.52.0/addon/fold/foldgutter.js"></script>
<script src="codemirror-5.52.0/addon/fold/brace-fold.js"></script>
<script src="codemirror-5.52.0/addon/fold/comment-fold.js"></script>
</head>
<body>
<textarea name="code" id="code"></textarea>
<script>
//根据DOM元素的id构造出一个编辑器
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: 'text/html', //实现html代码高亮
mode: "text/x-java", //实现Java代码高亮
lineNumbers: true, //显示行号
theme: "dracula", //设置主题
lineWrapping: true, //代码折叠
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
matchBrackets: true, //括号匹配
//readOnly: true, //只读
});
</script>
</body>
</html>
效果如下：
END
