codemirror代码编辑器,检测语法高亮显示
2016-12-14 18:02
267 查看
今天做项目的时候,有个需求是实现编辑JS代码时语法高亮显示,所以用codemirror插件实现了出来,在这里记录下来!
codemirror官网:http://codemirror.net/
codemirror支持自定义主题,而且支持多种语言的语法检测,感觉挺好用的;在这里我用的是自定义的仿照Run.js的主题
写的Demo如下:
测试效果图:
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>
测试效果图:
相关文章推荐
- ssh远程登录linux系统,vi无法进行语法高亮显示
- vim显示行号、语法高亮、自动缩进的设置
- 手指检测心跳设计——接收显示制作篇
- 关于mac/linux下vim的语法高亮与行号显示!
- sublime text增加smali插件,根据smali语法高亮显示
- 继承RichTextBox,完成代码编辑器,支持语法高亮、行号显示(二);
- 逐步设置vim C/C++语法高亮显示和自动缩进
- vim显示行号、语法高亮、自动缩进的设置
- 从TextBox添加到DataTable填充到GridView中显示之【此过程同时检测某个字段时候已经存在】
- Notepad++添加4gl语法高亮显示
- 逐步设置vim C/C++语法高亮显示和自动缩进
- UltraEdit的语法高亮显示配置
- 显示对象的像素级碰撞检测
- SecureCRT显示中文和语法高亮
- Ubuntu vim显示行号语法高亮自动缩进
- ping命令显示找不到主机,用安全软件网络急救箱检测显示IP地址错误
- 通过JavaScript实现实时的JS语法高亮显示字
- Linux-vimrc(vim显示行号、语法高亮、自动缩进的设置 )
- PCL中RANSAC使用,点云平面检测,显示,存储
- Vim配置 显示行号 语法高亮 智能缩进