CodeMIrror 簡單使用

代碼高亮是程序員的剛需，不管是在筆記類，論壇類，博客類web網站中，都對代碼高亮提出要求，不高亮的代碼閱讀體驗很差，codeMirror是一個前端代碼高亮庫，使用方便。

codeMirror可以直接在官網下載：http://codemirror.net/ 

下載文件中，我們需要的是 lib 下的 codemirror.js 和 codemirror.css ，這兩個是必備的，其他 theme(主題)，mode(高亮模式)按需定制。

比如說你要高亮一段xml，你就需要用到mode/xml/xml.js.

除此之外，demo是最好的案例，基本上都可以copy過來自己改一改，doc是一些文檔，不過都是英文的，我也沒細看。keymap里面可以定制一些代碼編輯的快捷鍵……

 

使用入門：

建立一個html文件，head中引入下列文件，此處我需要高亮xml，所以我引入了這個xml.js；

<link rel="stylesheet" href="lib/codemirror.css"/>
<script type="text/javascript" src="lib/codemirror.js"></script>
<script type="text/javascript" src="mode/xml/xml.js"></script>

在html中給一個textarea：

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

一般使用代碼高亮都是用在文檔內部，這里雖然給了個textarea，但是這里並不是把code直接顯示在textarea中，而是生成了一個div，內部定義了行號，代碼內容和滾動條等信息。

 

調用方法

editor_req = CodeMirror.fromTextArea(document.getElementById("code"), {
        mode: "xml",
        lineNumbers: true,
        scrollbarStyle: null
 });

配置可參考此文：http://www.hyjiacan.com/codemirror-config/ 

這里scrollbarStyle 是滾動條設置，我設置為null，是因為在使用中出現了個詭異的雙層滾動條的錯誤！

后來發現是我codeMirror寬度設置的問題，這里的scrollbarStyle 還是要按需定制。

.CodeMirror-scroll {
            overflow: auto;
            height: 360px;
            width: 860px;
 }

　

以上，就是初步的使用，如果有復雜需求，建議直接看源碼。