CodeMirror 是一款支援 Syntax Highlight 及多種特性的「網頁版程式碼編輯器」,它可以應用在線上開發工具,方便使用者編輯原始碼,例如 Google Code Playground 等。
我們在「ContPub自助出版服務」,也使用 CodeMirror 作為電子書原始碼的編輯器。它補強 HTML 的原生 TextArea 不支援 Tab 鍵、無法自動對齊等問題,也提供漂亮的語法高亮顯示(Syntax Highlighting)。
編輯的需求,用 CodeMirror 很輕鬆就能滿足。
不過,如果需要顯示原始碼,並且具有 Syntax Highlight 的效果,就需要再尋找一個解決方案。
Sytax Highlight 的作法,可以分為後端及前端:
- 後端:如 GeSHi(PHP)、Pygments(Python)等。
- 前端:如 SyntaxHighlighter、SHJS,都是 JavaScript。
後端處理的方案,我最喜歡的是 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 撰寫的範例程式。
沒有留言:
張貼留言