js代码在线运行

本文教程操作环境：windows7系统、jquery3.2.1版本，DELL G3电脑。

在编程中，实现代码的在线功能是非常迫切的需求。在js中有这样一个编辑器，能够实现代码的在线高亮，很多人都忽略了它的存在。这个编辑器就是codemirror，如果使用过一些基础库的人，可能见过它的身影。下面我们就codemirror概念、用法，以及配置项的在线运行为大家展开讲解。

1.codemirror概念

codemirror 基于Javascript，短小精悍，实时在线代码高亮显示，它不是某个富文本编辑器的附属产品，它是许多大名鼎鼎的在线代码编辑器的基础库。

2.codemirror用法

vareditor=CodeMirror.fromTextArea(document.getElementById("htmlEdit"),{
lineNumbers:false,
mode:"htmlmixed",
indentUnit:2,
lineWrapping:true,
styleActiveLine:true
});

3.codemirror配置项

cmOptions:{
//codemirrorconfig
flattenSpans:false,//默认情况下，CodeMirror会将使用相同class的两个span合并成一个。通过设置此项为false禁用此功能
tabSize:2,//tab缩进空格数
mode:'',//模式
theme:'monokai',//主题
smartIndent:true,//是否智能缩进
lineNumbers:true,//显示行号
matchBrackets:true,//匹配符号
lineWiseCopyCut:true,//如果在复制或剪切时没有选择文本，那么就会自动操作光标所在的整行
indentWithTabs:true,//在缩进时，是否需要把n*tab宽度个空格替换成n个tab字符
electricChars:true,//在输入可能改变当前的缩进时，是否重新缩进
indentUnit:2,//缩进单位，默认2
autoCloseTags:true,//自动关闭标签
autoCloseBrackets:true,//自动输入括弧
foldGutter:true,//允许在行号位置折叠
cursorHeight:1,//光标高度
keyMap:'sublime',//快捷键集合
extraKeys:{
'Ctrl-Alt':'autocomplete',
'Ctrl-Q':cm=>{
cm.foldCode(cm.getCursor())
}
},//智能提示
gutters:['CodeMirror-linenumbers','CodeMirror-foldgutter'],//用来添加额外的gutter
styleActiveLine:true//激活当前行样式
},

原文来自：https://www.py.cn