2011年12月16日

CodeMirror 2 runmode (highlight only) with gutter


CodeMirror 是一款支援 Syntax Highlight 及多種特性的「網頁版程式碼編輯器」,它可以應用在線上開發工具,方便使用者編輯原始碼,例如 Google Code Playground 等。

我們在「ContPub自助出版服務」,也使用 CodeMirror 作為電子書原始碼的編輯器。它補強 HTML 的原生 TextArea 不支援 Tab 鍵、無法自動對齊等問題,也提供漂亮的語法高亮顯示(Syntax Highlighting)。


編輯的需求,用 CodeMirror 很輕鬆就能滿足。

不過,如果需要顯示原始碼,並且具有 Syntax Highlight 的效果,就需要再尋找一個解決方案。

Sytax Highlight 的作法,可以分為後端及前端:


後端處理的方案,我最喜歡的是 Pygments,它提供 Python 的 lib 及 command-line(pygmentize)兩種使用方式,支援的原始碼類型、提供的佈景都相當多。它也支援我需要的 reStructuredText 原始碼。

但如果想用前端處理(節省伺服器消耗),目前使用 JavaScript 開發的 Highlighter,內建的語法分析器(Lexer)都僅以主流程式語言為主,像 reStructuredText 這種就只能自己刻一個分析器。

CodeMirror 作為一個原始碼編輯器,它的發展速度相當快,很早就開始支援 Markdown、reStructuredText,就連統計學用的 r (s-plus)語言,它都能吃;目前 CodeMirror 2 已經支援:

clike, diff, jinja2, pascal, r, smalltalk, xml, clojure, haskell, lua, php, rst, sparql, xmlpure, coffeescript, htmlmixed, markdown, plsql, ruby, stex, yaml, css, javascript, ntriples, python, scheme, velocity

但 CodeMirror 是「編輯器」,如果拿來做「read-only」的純顯示用途,似乎有點用牛刀殺雞的感覺。

還好 CodeMirror 很盡責,它已經提供一支 runmode.js(Mode Runner)及 DEMO,可以用它滿足「highlight only」的需求。

對開發者來說,編輯器和原始碼顯示功能,如果都使用 CodeMirror,就可以直接套用同一份佈景(theme),如此呈現的色彩效果就會一致,而不需要再花時間加工。

官方提供的 Mode Runner Demo 並沒有「行號(gutter)」顯示,和我的期待有些落差,所以我稍微修改了它的 callback 函式內容,把行號顯示功能加上去。以下是使用 jsFiddle 撰寫的範例程式。
 

沒有留言:

張貼留言

lyhcode by lyhcode
歡迎轉載,請務必註明出處!