王新阳

支持几十种编程语言的在线编辑，支持所有主流的浏览器。支持自动完成、代码折叠、HTML预览、全屏、代码格式化、Mustache模板高亮等。

http://codemirror.net/

https://zhuanlan.zhihu.com/p/22163474

http://blog.csdn.net/cuixiping/article/details/6278645

http://www.hyjiacan.com/category/trans/codemirror-doc/

我的CodeMirror配置：

<link rel="stylesheet" href="/static/codemirror-5.29/lib/codemirror.css">
<link rel="stylesheet" href="/static/codemirror-5.29/addon/display/fullscreen.css">
<script src="/static/codemirror-5.29/lib/codemirror.js"></script>
<script src="/static/codemirror-5.29/addon/edit/matchbrackets.js"></script>
<script src="/static/codemirror-5.29/addon/selection/active-line.js"></script>
<script src="/static/codemirror-5.29/addon/display/fullscreen.js"></script>
<script src="/static/codemirror-5.29/mode/htmlmixed/htmlmixed.js"></script>
<script src="/static/codemirror-5.29/mode/xml/xml.js"></script>
<script src="/static/codemirror-5.29/mode/javascript/javascript.js"></script>
<script src="/static/codemirror-5.29/mode/css/css.js"></script>
<script src="/static/codemirror-5.29/mode/clike/clike.js"></script>
<script src="/static/codemirror-5.29/mode/php/php.js"></script>
<style>.CodeMirror{height:500px;border:1px solid #999;}</style>
<script>
var CM_editor=CodeMirror.fromTextArea($("textarea[name='content']")[0],{
	styleActiveLine:true,
	flattenSpans:false, //禁止合并span(值为true时未发现到底哪种情况会合并)
	autofocus:true, //自动获取焦点
	lineNumbers: true, //显示行号
	matchBrackets: true, //括号匹配
	mode: "application/x-httpd-php",
	indentUnit: 4, //tab宽度
	indentWithTabs: true, //tab缩进
	//theme:"default", //主题
	lineWrapping:true, //代码自动换行
	
	extraKeys: { //全屏
		"F11": function(cm){cm.setOption("fullScreen", !cm.getOption("fullScreen"));},
		"Esc": function(cm){if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);}
	}
});
//全屏
$('.js-btn-fullscreen').click(function(){
	CM_editor.setOption("fullScreen", !CM_editor.getOption("fullScreen"));
	CM_editor.focus();
});
//加载主题
$('select.js-theme').change(function(){
	var theme=$(this).val();
	if(!theme)return;
	if(theme!='default')$('<link rel="stylesheet" href="/static/codemirror-5.29/theme/'+theme+'.css">').appendTo('head');
	CM_editor.setOption('theme', theme);
});
//自动换行
$('.js-lineWrapping').click(function(){
	CM_editor.setOption('lineWrapping', $(this).prop('checked'));
});
</script>