在博客园添加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>标签）;

3. 写文章时，点击第二个“插入代码”按钮（第一个按钮不是用JS代码来动态着色，而是由博客园后台着色产生对应的HTML代码，然后再插入编辑器的。它只适合博客园后台能支持的语言类型）;

4. 在弹出的对话框中贴上代码，“编程语言”一项随便选一个即可；

5. 回到博文编辑器，点击那个"HTML"按钮（就在刚才“插入代码”按钮的右边），找到刚才贴入的代码，修改代码语言名称（也就是把<pre class="brush:xxxxx"...改为<pre class="brush:elisp", 这里的语言名称由上面刷子代码里面的SyntaxHighlighter.brushes.Lisp.aliases提供）

 

方法二：采用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），可以将这几个文件传到博客园后台，然后用https://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()实现才行，我暂时还没有找到比较简单的修正办法。

所以，目前我倾向于两者都用，前者用在正文里面，后者留给评论使用。