codemirror代码编辑器，检测语法高亮显示

最新推荐文章于 2025-04-13 16:01:20 发布

方寸之间。

最新推荐文章于 2025-04-13 16:01:20 发布

阅读量1.1w

点赞数 1

分类专栏： javascript codeMirror 文章标签： codemirror 编辑器插件 javascript js

本文链接：https://blog.youkuaiyun.com/mazhili1991/article/details/53643206

版权

javascript 同时被 2 个专栏收录

10 篇文章

订阅专栏

codeMirror

1 篇文章

订阅专栏

今天做项目的时候，有个需求是实现编辑JS代码时语法高亮显示，所以用codemirror插件实现了出来，在这里记录下来！

codemirror官网：http://codemirror.net/

codemirror支持自定义主题，而且支持多种语言的语法检测，感觉挺好用的；在这里我用的是自定义的仿照Run.js的主题

写的Demo如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CodeMirror</title>
<link rel="stylesheet" href="css/codemirror.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/eclipse.css">
<script type="text/javascript" src="js/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="js/codemirror.js"></script>
<script type="text/javascript" src="js/javascript.js"></script>

<style type="text/css">
body{
	background: #EBEBEB;
}
textarea{
	width: 1000px;
	height: 800px;
}
#showContent{
	width: 1000px;
	height: 400px;
	margin: 10px auto 0 auto;
	color: #FFEE99;
	background: #AAAAAA;
}
.btn{
	width: 1000px;
	height: 20px;
	margin: 10px auto 0 auto;
	text-align: center;
}
</style>
</head>
<body>
<textarea id="myCode"></textarea>
<div class="btn"><button οnclick="getInputValue();">获取输入的值</button></div>
<pre id="showContent"></pre>

<script type="text/javascript">
var editor = CodeMirror.fromTextArea(document.getElementById("myCode"), {
    lineNumbers: true, /* 定义是否显示行号 */
    mode: "javascript",  /* 定义语法的类型，如果是html则为：text/html */
    theme: "custom" /* 定义主题 */
});

function getInputValue(){
	document.getElementById("showContent").innerText = editor.getValue();
}
</script>
</body>
</html>

测试效果图：