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

来源：互联网发布：mysql 用户管理编辑：程序博客网时间：2024/05/18 00:00

今天做项目的时候，有个需求是实现编辑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 onclick="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>

测试效果图：

0 0