CodeMirror简单使用

最新推荐文章于 2024-03-23 16:20:59 发布

芋智波佐助

最新推荐文章于 2024-03-23 16:20:59 发布

阅读量6.3k

点赞数 1

分类专栏：前端插件

本文链接：https://blog.csdn.net/u011686226/article/details/51922745

版权

前端插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

看着官网的文档，搞了半天，一个半成品。。。有自动提示，代码高亮，括号匹配等功能。。。

<!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>

芋智波佐助

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CodeMirror简单使用

看着官网的文档，搞了半天，一个半成品。。。有自动提示，代码高亮，括号匹配等功能。。。在线编程$(function(){ var textarea = document.getElementById('editorBo
复制链接

扫一扫