最近要写一个简单的html网页的日志规范，领导建议用一些目前流行的code代码高亮度显示插件（javascript）等。

然后，就开始对各种不通的code代码显示插件的研究。

研究的目标：

（1）有一个纯文本显示（highlight ,codemirror 都可以实现）；

（2）一个输入代码高亮度显示(codemirror 实现)。

首先，研究的是highlight,highlight 是javascript+css 控制完成的代码提示，功能很强大。而且使用方便。主要体现在：

（1）只需要引入一个js 脚本（highlight.pack.js）

 (2)有大约50多个不同的theme,可以根据自己的需求来使用，而且只需引用一个主题的css文件即可。

（3)在打算高亮度显示的code（红色标注），用<pre><code class="json">code</code></pre>。

但是 highlight 插件目前没有找到可以运用到textarea 的方法。

所以后来研究了codemirror codemirror 的引用方法。

js文件

<script src="http://www.mamicode.com/dist/codemirror-4.11/lib/codemirror.js"></script> 主js 文件

<script src="http://www.mamicode.com/dist/codemirror-4.11/addon/edit/matchbrackets.js"></script>

<script src="http://www.mamicode.com/dist/codemirror-4.11/addon/comment/continuecomment.js"></script>

<script src="http://www.mamicode.com/dist/codemirror-4.11/addon/comment/comment.js"></script>

<script src="http://www.mamicode.com/dist/codemirror-4.11/mode/javascript/javascript.js"></script> 因为使用的是javascript mode

css 文件

<link rel="stylesheet" href="http://www.mamicode.com/dist/codemirror-4.11/lib/codemirror.css"> 主css 文件

<link rel="stylesheet" href="http://www.mamicode.com/dist/codemirror-4.11/theme/monokai.css"> 主题

下面是要输入代码的区域：

<textarea id="code" name="code" style="display: none;">code</textarea>

执行 js 代码：

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {        lineNumbers: true,        continueComments: "Enter", matchBrackets: true,        extraKeys: {"Ctrl-Q": "toggleComment"},        mode: {name: "javascript",globalVars: true,json:true}      });

为提示输入的内容，设置默认提示语“请输入要检验的日志”，点击光标却在提示语之后，为了使得点击删除默认提示语，光标回到首行。

针对该功能，在 codemirror.js 中做了一点小手脚。

enventInWidget(display,e){
var n1=e_target(e);
if($(n1).text()==‘请输入要检验的日志‘){
$(n1).text(‘‘);
}
}

定义全局flag

var flag=0;
在buildLineContent(cn,lineView,ii){
if(ii>0&&flag==0){
lineView.line.text=lineView.line.text.substring(lineView.line.indexOf(‘请输入要检验的日志‘+9,lineView.line.text.length));
}

  其中，buildLineContent函数已加入一个变量ii  ,getLineContent函数也加入一个变量ii,ii=0 表示

首次加载，ii=1 表示第一次输入，即要删除默认提示语。

codemirror 小功能的添加（点击删除默认的提示语）