看着官网的文档,搞了半天,一个半成品。。。有自动提示,代码高亮,括号匹配等功能。。。
<!DOCTYPE html>
<html>
<head>
<title>在线编程</title>
<meta charset="UTF-8">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="/resources/plugin/codemirror/lib/codemirror.css" rel="stylesheet">
<script type="text/javascript" src="/resources/plugin/codemirror/lib/codemirror.js"></script>
<!-- 主题 -->
<link href="/resources/plugin/codemirror/theme/liquibyte.css" rel="stylesheet">
<!-- mode -->
<script type="text/javascript" src="/resources/plugin/codemirror/mode/clike/clike.js"></script>
<!-- 编辑 -->
<script type="text/javascript" src="/resources/plugin/codemirror/addon/edit/closebrackets.js"></script>
<script type="text/javascript" src="/resources/plugin/codemirror/addon/edit/closetag.js"></script>
<script type="text/javascript" src="/resources/plugin/codemirror/addon/edit/continuelist.js"></script>
<script type="text/javascript" src="/resources/plugin/codemirror/addon/edit/matchbrackets.js"></script>
<script type="text/javascript" src="/resources/plugin/codemirror/addon/edit/matchtags.js"></script>
<script type="text/javascript" src="/resources/plugin/codemirror/addon/edit/trailingspace.js"></script>
<!-- hint -->
<script type="text/javascript" src="/resources/plugin/codemirror/addon/hint/javascript-hint.js"></script>
<script type="text/javascript" src="/resources/plugin/codemirror/addon/hint/show-hint.js"></script>
<link href="/resources/plugin/codemirror/addon/hint/show-hint.css" rel="stylesheet">
</head>
<body>
</body>
</html>
<link href="/resources/plugin/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="/resources/plugin/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/resources/plugin/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
var textarea = document.getElementById('editorBox');
var editor = CodeMirror.fromTextArea(textarea, {
lineNumbers: true,
autofocus: true,
mode: 'text/x-c++src',
//theme: 'liquibyte',
matchBrackets: true,
autoCloseBrackets: true,
extraKeys: {"Ctrl": "autocomplete"},
});
});
</script>
<style type="text/css">
body {
padding-top: 50px;
}
.starter-template {
padding: 40px 15px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">一起写代码吧</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a>主页</a></li>
<li><a href="jetbrick.template">bbbbbbbbbb</a></li>
<li><a>saf页</a></li>
<li><a>safa主页</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="starter-template">
<textarea rows="20" cols="100" id="editorBox" style="width: 100%;" ></textarea>
<textarea rows="20" cols="100" id="result" style="width: 100%;" ></textarea>
</div>
</div>
</body>
</html>