天天看點

在部落格園添加Lisp(或其它)代碼高亮

由于我這一段對Emacs很有興趣,發了不少關于這玩意兒的文章。但部落格園的代碼高亮并不支援Emacs Lisp,之前一直也沒怎麼管,前幾天看見李殺的這篇 Syntax Coloring with Google-Code-Prettify,想試試部落格園上面能不能折騰出來,于是開始折騰這個Google Code Prettify,最後又發現部落格園的文法高亮插件SyntaxHighlighter也可以搞定。

方法一: 基于部落格園自帶的SyntaxHighlighter

部落格園自帶的代碼動态高亮插件是SyntaxHighlighter,但部落格園沒有提供用于lisp的刷子(brush)——畢竟這個語言在部落格園畢竟小衆 :-),但我在網上找了一圈也沒有找到,隻找到一個clojure的,略微改了改,湊合着可以用上。示例效果如下:

(defun iedit-symbol-in-defun ()
  "Enter `iedit-mode' to rename the symbol in current function, or exit it."
  (interactive)
  (if iedit-mode
      (progn
        (iedit-mode -1)
        (widen))
    (progn
      (if (thing-at-point 'symbol)
          (progn
            (narrow-to-defun)
            (iedit-mode t)
            (message "When done, run `epy-iedit-in-defun' again to quit.")
            )
        (error "You need to put cursor on identifier.")
      )))) 
      

下面說一下方法:

1. 在網上找該語言的SyntaxHighlighter刷子代碼,這裡有一個不錯的第三方刷子清單: All Syntax Highlighter 2.0 brushes collected, described and downloadable

2. 打開部落格園管理背景,找到“設定”一欄,在“公告”或者“頁首html代碼”一欄填入剛才找到的刷子代碼(當然,前後得加<script>标簽);

在部落格園添加Lisp(或其它)代碼高亮

3. 寫文章時,點選第二個“插入代碼”按鈕(第一個按鈕不是用JS代碼來動态着色,而是由部落格園背景着色産生對應的HTML代碼,然後再插入編輯器的。它隻适合部落格園背景能支援的語言類型);

在部落格園添加Lisp(或其它)代碼高亮

4. 在彈出的對話框中貼上代碼,“程式設計語言”一項随便選一個即可;

5. 回到博文編輯器,點選那個"HTML"按鈕(就在剛才“插入代碼”按鈕的右邊),找到剛才貼入的代碼,修改代碼語言名稱(也就是把<pre class="brush:xxxxx"...改為<pre class="brush:elisp", 這裡的語言名稱由上面刷子代碼裡面的SyntaxHighlighter.brushes.Lisp.aliases提供)

在部落格園添加Lisp(或其它)代碼高亮

方法二:采用Google Code Prettify

1. 類似地,在背景“設定”中,将如下代碼插入到在“公告”或者“頁首html代碼”一欄

<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-lisp.js"></script>
<script type="text/javascript">
window.setTimeout(prettyPrint, 2000);
</script>      

(如果你擔心使用者們通路googlecode網站存在問題(萬惡的G_F-W),可以将這幾個檔案傳到部落格園背景,然後用http://files.cnblogs.com/bamanzi/prettify.js 這樣的路徑來引用)

2. 在編輯文章的時候,同樣,也是用第二個“插入代碼”按鈕來貼代碼,“程式設計語言”一項任選;

3. 回到博文編輯器,點選那個"HTML"按鈕(就在剛才“插入代碼”按鈕的右邊),找到剛才貼入的代碼,将

<pre class="brush:delphi;gutter:false;">      

改為:

<pre class="prettyprint lang-lisp">      

為什麼這麼改:prettyprint是Google Code Prettify的識别符号,而lang-lisp則是标明語言類型,具體說明可參看它的README文檔(裡面也有各類語言的擴充連結,比如F#, YAML等; 還說明了如何添加行号等)

效果示例:

(defun iedit-symbol-in-defun ()
  "Enter `iedit-mode' to rename the symbol in current function, or exit it."
  (interactive)
  (if iedit-mode
      (progn
        (iedit-mode -1)
        (widen))
    (progn
      (if (thing-at-point 'symbol)
          (progn
            (narrow-to-defun)
            (iedit-mode t)
            (message "When done, run `epy-iedit-in-defun' again to quit.")
            )
        (error "You need to put cursor on identifier.")
      )))) 
      

兩種方法的比較

總的來說,第一種方法比較好,因為除了正文,使用者評論的代碼也是用SyntaxHighlighter來高亮的,隻要評論時寫[code=elisp]....[/code]就可以了。

但就Clojure/Lisp的實作而言,我找的SyntaxHighlighter刷子有點問題:它會把(defun ....)和(narrow-to-defun)裡面的defun都着色,這是由于它的核心代碼在正規表達式中用\b來識别關鍵字的邊界,但"-"這個字元偏偏是Lisp中非常常用的字元,是以得修改刷子裡面的this.getKeywords()實作才行,我暫時還沒有找到比較簡單的修正辦法。

是以,目前我傾向于兩者都用,前者用在正文裡面,後者留給評論使用。

繼續閱讀