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

用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。