用ACE实现网页代码编辑器和代码高亮
一下链接是官网 http://ace.c9.io 提供的ace代码高亮库(不得不吐槽一下这个官网,只有这一个有效链接……)
https://github/ajaxorg/ace/tree/master/lib/ace
将 ace.js 导入页面中
<script src="/src-noconflict/ace.js"></script>
写html页面,<pre>中的javascript代码是我们想要高亮的内容。
<div class="container">
<pre class="marpad pre-scrollable" type="text" style="width:70%;height:300px;" id="editor" >
//Highlight Test
function IMActive(){
document.getElementById('IM').className='active';
document.getElementById('AM').className='';
document.getElementById('automative').hidden = "hidden";
document.getElementById('interactive').hidden = "";
}
function AMActive(){
document.getElementById('AM').className='active';
document.getElementById('IM').className='';
document.getElementById('automative').hidden = "";
document.getElementById('interactive').hidden = "hidden";
}
</pre>
</div>
下面是使用方法,用 ace.edit([name])可以用ace创建一个代码编辑器。可以对编辑器的功能、模板进行配置。
<script>
"use strict";
var editor = ace.edit("editor");
editor.setTheme("ace/theme/twilight");
editor.session.setMode("ace/mode/javascript")
editor.setOptions({
enableBasicAutocompletion:true,
enableSnippets:true
})
</script>
最终效果是这样:
用 CodeMirror 实现代码编辑器
CodeMirror 的官网是 http://codemirror/ 官网上有详细地manual
插件下载地址是 https://github/codemirror/codemirror
先导入js和css
<script src="lib/codemirror.js"></script>
<link rel="stylesheet" href="lib/codemirror.css">
<script src="mode/javascript/javascript.js"></script>
同样使用上面那段html做测试
用CodeMirror.fromTextArea([textarea],.config object) 对<textarea>标签进行高亮
html代码:
<div class="container">
<textarea class="marpad " tyle="width:70%;height:300px;" id="editor" >
//Highlight Test
function IMActive(){
document.getElementById('IM').className='active';
document.getElementById('AM').className='';
document.getElementById('automative').hidden = "hidden";
document.getElementById('interactive').hidden = "";
}
function AMActive(){
document.getElementById('AM').className='active';
document.getElementById('IM').className='';
document.getElementById('automative').hidden = "";
document.getElementById('interactive').hidden = "hidden";
} </textarea>
</div>
用CodeMirror创建:
var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("editor"), {
lineNumbers:true,
mode: "javascript"
});
That’s it.
也许之后还会带来ace的自定义语法高亮js。
更多推荐
网页代码编辑器的两个插件: ACE 和 CodeMirror
发布评论