前端页面添加代码编辑区域（css和sql高亮）

最新推荐文章于 2025-03-19 12:44:31 发布

帅气的小面包

最新推荐文章于 2025-03-19 12:44:31 发布

阅读量3.6k

点赞数 2

分类专栏：学习道路文章标签：前端开发

本文链接：https://blog.csdn.net/weixin_44285195/article/details/89950456

版权

学习道路专栏收录该内容

3 篇文章

订阅专栏

博主作为初级菜鸟，工作中需在前端页面添加可编辑代码区域并实现CSS和SQL语句高亮。通过使用CodeMirror实现，步骤包括从官网下载CodeMirror，查看所需CSS和JS文件，将文件引入项目，参考示例代码添加代码，最终实现高亮效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端页面添加代码编辑区域（css和sql高亮）

初级菜鸟，工作遇到了前端页面需要放一块可编辑代码的区域，只需要高亮css和sql语句，就去各种百度，最后使用了codemirror，下面为记录步骤。

1.下载codemirror

官网直接下载，点击DOWNLOAD
codemirror

2.下载完查看需要用到的css和js

在这里插入图片描述
lib目录下的css和js必须导入，然后就在mode里面找到需要的css和sql的js

3.运用到页面中

拿到的1个css和3个js文件引入到项目中

<link rel="stylesheet" type="text/css" href="lib/codemirror.css"/>
<script type="text/javascript" src="lib/codemirror.js"></script>
<script type="text/javascript" src="js/css.js"></script>
<script type="text/javascript" src="js/sql.js"></script>

html中代码

<body>
	<textarea name="editor" id="editor"></textarea>
</body>

自己本地的js文件中加入代码，这段代码参考codemirror的demo目录下的changemode.html文件

<script type="text/javascript">	
		myTextarea = document.getElementById("editor");
		var editor = CodeMirror.fromTextArea(myTextarea, {
//		    mode: "text/x-mysql",
		    lineNumbers: true,//显示行数
          	matchBrackets: true,  // 括号匹配（这个需要导入codemirror的matchbrackets.js文件）
		  });
	   	var pending;
		editor.on("change", function() {
		    clearTimeout(pending);
		    pending = setTimeout(update,200);
		});
		function looksLikeScheme(code) {
			//正则表达式，判断textarea中输入的是否是sql语句
		    return /^select[\s\S]*/.test(code) || /^insert.*$/.test(code) || /^delete.*$/.test(code) || /^update.*$/.test(code);
		}
		function update() {
			//如果输入是sql语句，则给editor设置mode属性为mysql，否则为css
		    editor.setOption("mode", looksLikeScheme(editor.getValue()) ? "text/x-mysql" : "text/css");
		}
</script>