CodeMirror在線代碼編輯器官方下載 V5.3.1.0 免費版

CodeMirror是一款“Online Source Editor”，一款基于JavaScript的代碼編輯器。短小精悍，實時在線代碼高亮顯示，支持多種代碼語言，是許多大名鼎鼎的在線代碼編輯器的基礎(chǔ)庫。

軟件簡介

CodeMirror支持大量語言的語法高亮，包括C、C++、C#、Java、Perl、PHP、JavaScript、Python、Lua、Go、Groovy、Ruby等，以及diff、LaTeX、SQL、wiki、Markdown等文件格式。此外，CodeMirror還支持代碼自動完成、搜索/替換、HTML預(yù)覽、行號、選擇/搜索結(jié)果高亮、可視化tab、Emacs/VIM鍵綁定、代碼自動格式等。 

CodeMirror采用MIT開源許可協(xié)議，目前已經(jīng)被集成到各種應(yīng)用程序中，如Adobe Brackets、CoDev、Light Table等開發(fā)環(huán)境，還被作為各種SQL、Haxe、JavaScript在線編輯器的基礎(chǔ)庫來使用。 

軟件功能

開箱即用，支持超過100種語言

強大的、可組合的語言模式系統(tǒng)

自動完成 (XML)

代碼折疊

可配置的按鍵綁定

Vim、Emacs和Sublime文本裝訂系統(tǒng)

搜索和替換界面

托架和標(biāo)簽匹配

支持分割視圖

襯膠機整合

混合字體大小和風(fēng)格

各種主題

可調(diào)整大小以適應(yīng)內(nèi)容

內(nèi)嵌式和塊狀小部件

可編程水溝

使文本范圍具有風(fēng)格化的、只讀或原子化的文本范圍

雙向文字支持

許多其他方法和附加組件.....

CodeMirror 入門教程

建立一個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>

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

調(diào)用方法

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

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

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

后來發(fā)現(xiàn)是我codeMirror寬度設(shè)置的問題，這里的scrollbarStyle 還是要按需定制。

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

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