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>
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
# -*- coding: UTF-8 -*-
for i in range(1,5):
for j in range(1,5):
for k in range(1,5):
if( i != k ) and (i != j) and (j != k):
print i,j,k`
editor.setValue(scriptCode); //給代碼框賦值
// editor.setOption("readOnly", true);
</script>
</body>
</html>
運行結果：
