代码高亮是程序员的刚需，不管是在笔记类，论坛类，博客类web网站中，都对代码高亮提出要求，不高亮的代码阅读体验很差，codeMirror是一个前端代码高亮库，使用方便。CodeMirror 是一款在线的支持语法高亮的代码编辑器。
codeMirror可以直接在官网下载：http://codemirror.net/
下载文件中，我们需要的是 lib 下的 codemirror.js 和 codemirror.css ，这两个是必备的，其他 theme(主题)，mode(高亮模式)按需定制。
比如说你要高亮一段xml，你就需要用到mode/xml/xml.js.
除此之外，demo是最好的案例，基本上都可以copy过来自己改一改，doc是一些文档，不过都是英文的，我也没细看。keymap里面可以定制一些代码编辑的快捷键……
使用入门：
建立一个html文件，head中引入下列文件，此处我需要高亮xml，所以我引入了这个xml.js；
<link rel="stylesheet" href="lib/codemirror.css"/>
<script type="text/javascript" src="lib/codemirror.js"></script>
<script type="text/javascript" src="mode/xml/xml.js"></script>在html中给一个textarea：
<textarea id="code" name="code" style="display: none"></textarea>一般使用代码高亮都是用在文档内部，这里虽然给了个textarea，但是这里并不是把code直接显示在textarea中，而是生成了一个div，内部定义了行号，代码内容和滚动条等信息。
调用方法
editor_req = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "xml",
lineNumbers: true,
scrollbarStyle: null
});这里scrollbarStyle 是滚动条设置，我设置为null，是因为在使用中出现了个诡异的双层滚动条的错误！
后来发现是我codeMirror宽度设置的问题，这里的scrollbarStyle 还是要按需定制。
.CodeMirror-scroll {
overflow: auto;
height: 360px;
width: 860px;
}
以上，就是初步的使用，如果有复杂需求，建议直接看源码。
CodeMirror的使用方法
最近项目中用到了CodeMirror这个代码编辑器，感觉非常好用，可以设置很多种代码格式。默认前提是你已经正确引入了所有的js文件和css文件。
下面是我在项目中用到过和在网上搜集整理的使用方法：
1、首先在html界面中建立textarea标签，用于生成代码框
<textarea id="code"></textarea>2、根据textarea的id获取到标签元素，将容器转换为编辑器
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {//定义CodeMirror代码编辑器
lineNumbers: true, // 显示行号
indentUnit: 4, // 缩进单位为4
styleActiveLine: true, // 当前行背景高亮
matchBrackets: true, // 括号匹配
mode: 'htmlmixed', // HMTL混合模式
lineWrapping: true, // 自动换行
theme: 'monokai', // 编辑器主题
});API
editor.setSize(width,height)//设置编辑框的尺寸
editor.getValue()//获取经过转义的编辑器文本内容
editor.toTextArea()或editor.getTextArea().value//该方法得到的结果是未经过转义的数据
editor.setValue(text)//设置编辑器文本内容
editor.getRange({line,ch},{line,ch})//获取指定范围内的文本内容第一个对象是起始坐标，第二个是结束坐标
editor.replaceRange(replaceStr,{line,ch},{line,ch})//替换指定区域的内容
editor.getLine(line)//获取指定行的文本内容
editor.lineCount()//统计编辑器内容行数
editor.firstLine()//获取第一行行数，默认为0，从开始计数
editor.lastLine()//获取最后一行行数
editor.getLineHandle(line)//根据行号获取行句柄
editor.getSelection()//获取鼠标选中区域的代码
editor.replaceSelection(str)//替换选中区域的代码
editor.setSelection({line:num,ch:num1},{line:num2,ch:num3})//设置一个区域被选中
editor.somethingSelected()//判断是否被选择
editor.getEditor()//获取CodeMirror对像
editor.undo()//撤销
editor.redo()//回退可能整理的不全，欢迎补充。
