codeMirror编写属于自己的编辑器
发布时间
阅读量：
阅读量
codeMirror是一款十分强大的代码编辑插件，提供了十分丰富的API，
codeMirror调用非常方便
首先在页面中载入插件CSS及JS文件
<link href="/static/codemirror/lib/codemirror.css" rel="stylesheet" >
<script src="/static/codemirror/lib/codemirror.js"></script>
同时加载你所需要使用的脚本JS及风格样式CSS文件，如下举例：
<!--begin code mirror -->
<!--下面两个是使用Code Mirror必须引入的-->
<link rel="stylesheet" href="lib/codemirror.css"/>
<script src="lib/codemirror.js"></script>
<!--Java代码高亮必须引入-->
<script src="clike.js"></script>
<!--groovy代码高亮-->
<script src="mode/groovy/groovy.js"></script>
<script src="mode/python/python.js"></script>
<script src="mode/javascript/javascript.js"></script>
<!--引入css文件，用以支持主题-->
<!-- <link rel="stylesheet" href="theme/dracula.css"/> -->
<link rel="stylesheet" href="theme/blackboard.css"/>
<!--支持代码折叠-->
<link rel="stylesheet" href="addon/fold/foldgutter.css"/>
<script src="addon/fold/foldcode.js"></script>
<script src="addon/fold/foldgutter.js"></script>
<script src="addon/fold/brace-fold.js"></script>
<script src="addon/fold/comment-fold.js"></script>
<!--括号匹配-->
<script src="addon/edit/matchbrackets.js"></script>
AI写代码
html代码
<!DOCTYPE html>
<html lang="en">
<!--begin code mirror -->
<!--下面两个是使用Code Mirror必须引入的-->
<link rel="stylesheet" href="lib/codemirror.css"/>
<script src="lib/codemirror.js"></script>
<!--Java代码高亮必须引入-->
<script src="clike.js"></script>
<!--groovy代码高亮-->
<script src="mode/groovy/groovy.js"></script>
<script src="mode/python/python.js"></script>
<script src="mode/javascript/javascript.js"></script>
<!--引入css文件，用以支持主题-->
<!-- <link rel="stylesheet" href="theme/dracula.css"/> -->
<link rel="stylesheet" href="theme/blackboard.css"/>
<!--支持代码折叠-->
<link rel="stylesheet" href="addon/fold/foldgutter.css"/>
<script src="addon/fold/foldcode.js"></script>
<script src="addon/fold/foldgutter.js"></script>
<script src="addon/fold/brace-fold.js"></script>
<script src="addon/fold/comment-fold.js"></script>
<!--括号匹配-->
<script src="addon/edit/matchbrackets.js"></script>
<!--end Code Mirror -->
<head>
<meta charset="utf-8"/>
<title>代码框</title>
</head>
<h1>代码在线编辑编译demo</h1>
<body>
<!-- begin code -->
<textarea class="form-control" id="code" name="code"></textarea>
<!-- end code-->
</div>
<script>
//根据DOM元素的id构造出一个编辑器
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "text/groovy", //实现groovy代码高亮
mode: "text/x-java", //实现Java代码高亮
mode: "text/python",
mode: "text/javascript",//实现python代码高亮
lineNumbers: true, //显示行号
theme: "blackboard", //设置主题
lineWrapping: true, //代码折叠
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
matchBrackets: true, //括号匹配
//readOnly: true, //只读
});
editor.setSize('800px', '500px'); //设置代码框的长宽
editor.setValue(""); //先代码框的值清空
var scriptCode = `#!/usr/bin/python
115. # -*- coding: UTF-8 -*-
117. for i in range(1,5):
119. for j in range(1,5):
121. for k in range(1,5):
123. if( i != k ) and (i != j) and (j != k):
125. print i,j,k`
editor.setValue(scriptCode); //给代码框赋值
// editor.setOption("readOnly", true);
</script>
</body>
</html>
AI写代码运行结果：
全部评论 (0)
还没有任何评论哟~