网页代码编辑器的两个插件: ACE 和 CodeMirror

用ACE实现网页代码编辑器和代码高亮

一下链接是官网 http://ace.c9.io 提供的ace代码高亮库（不得不吐槽一下这个官网，只有这一个有效链接……）
https://github.com/ajaxorg/ace/tree/master/lib/ace
将 ace.js 导入页面中

<script src="/src-noconflict/ace.js">script>

写html页面，

中的javascript代码是我们想要高亮的内容。
 
  
"container">
            
"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";
    }
            
 
  
下面是使用方法，用 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.net/ 官网上有详细地manual 
 插件下载地址是 https://github.com/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) 对标签进行高亮 <br> html代码：</p> 
  <pre class="prettyprint"><code class=" hljs scilab"><div class=<span class="hljs-string">"container"</span>>
            <textarea class=<span class="hljs-string">"marpad "</span> tyle=<span class="hljs-string">"width:70%;height:300px;"</span> id=<span class="hljs-string">"editor"</span> >
                 <span class="hljs-comment">//Highlight Test</span>
            <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">IMActive</span><span class="hljs-params">()</span>{</span>
                <span class="hljs-transposed_variable">document.</span>getElementById(<span class="hljs-string">'IM'</span>).className=<span class="hljs-string">'active'</span>;
                <span class="hljs-transposed_variable">document.</span>getElementById(<span class="hljs-string">'AM'</span>).className=<span class="hljs-string">''</span>;
                <span class="hljs-transposed_variable">document.</span>getElementById(<span class="hljs-string">'automative'</span>).hidden = <span class="hljs-string">"hidden"</span>;
                <span class="hljs-transposed_variable">document.</span>getElementById(<span class="hljs-string">'interactive'</span>).hidden = <span class="hljs-string">""</span>;
    }
            <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">AMActive</span><span class="hljs-params">()</span>{</span>
                <span class="hljs-transposed_variable">document.</span>getElementById(<span class="hljs-string">'AM'</span>).className=<span class="hljs-string">'active'</span>;
                <span class="hljs-transposed_variable">document.</span>getElementById(<span class="hljs-string">'IM'</span>).className=<span class="hljs-string">''</span>;
                <span class="hljs-transposed_variable">document.</span>getElementById(<span class="hljs-string">'automative'</span>).hidden = <span class="hljs-string">""</span>;
                <span class="hljs-transposed_variable">document.</span>getElementById(<span class="hljs-string">'interactive'</span>).hidden = <span class="hljs-string">"hidden"</span>;
    }           
        

用CodeMirror创建：

var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("editor"), {
                lineNumbers:true,
                mode:  "javascript"

            });     

That’s it.
也许之后还会带来ace的自定义语法高亮js。