CodeMirror 介紹 - 在Web上呈現程式語言內容

CodeMirror: http://marijn.haverbeke.nl/codemirror/

一般的programmer總會想在 web 上面去分享自已的一些sample code

但是，html 對於一般程式語言用的換行、tab符號 都視為空白

且，Browser也缺乏對 programmer language syntax high-lighting/coloring, code indentation(縮行)..等功能

所以，我們單純的把程式碼做為 html 的文字內容時，常常得到的是一串很醜、沒斷行的字串
就算加了 pre 這個 html tag, 能保留斷行、空白 但也無法擁有 syntax hilight 的功能

一般，可能用貼圖的方式 or 檔案下載的方式 來提供這些程式碼的內容

或是自訂css來做呈現~

但這些方法都比較間接 也比較麻煩一點...

Code Mirror 就是為了幫助解決這個問題所生的一套 javascript library

基本上，它提供了一個 code editor 的介面

提供了數種程式語言的呈現及編輯介面 (只要依它定的規則去寫parser，就可以再延伸其它語言的應用)，使用者可以很清義的透過 javascript 來使用、設定呈現的效果

目前支援的語言有 HTML ,XML, JavaScript, Python, CSS, SPARQL, PHP

透過 CodeMirror config值的設定，可以定義該呈現區塊處理的程式語言為何(parser)、呈現方式為何(css file)、要不要有行號、要不要自動換行(wrapping)...等功能

可說是非常的方便~

連 Google 的 API playground, Google Earth KML Sampler 都是透過code mirror來打造出一個可線上編輯、執行JavaScript的環境

下面是我試用的結果: