Emacs で何でもハイライト

前に、ブログにコードハイライトの JavaScript を入れてハイライトできるようにしました。
ただ、コードハイライトのスクリプトを調べた時、 emacs-lisp に対応しているものは見つかりませんでした。でも、やっぱりハイライトにしたいので、 Emacs を使ってコードハイライトする方法を紹介します。
この方法だと Emacs でハイライトできるコードはなんでもハイライトできます。

htmlize.el のインストール

コードのハイライトには Htmlize を使用します。
これはバッファに表示している内容をハイライトをつけたまま html に変換する lisp です。

まず、 htmlize.el をダウンロードしてパスの通ったディレクトリに置きます。 次に以下のコードを .emacs.el(init.el) などに記述します。

(autoload 'htmlize-buffer "htmlize" 
  "Convert BUFFER to HTML, preserving colors and decorations." t)
(autoload 'htmlize-region "htmlize" 
  "Convert the region to HTML, preserving colors and decorations." t)
(autoload 'htmlize-file "htmlize" 
  "Load FILE, fontify it, convert it to HTML, and save the result." t)

これで M-x htmlize-buffer などでバッファの内容を html に変換できるようになります。


Emacs 24.1 以上の場合はパッケージで簡単にインストールすることができます。
オプション(Options)] メニューの [Manage Emacs Packages] または M-x list-packages でパッケージアーカイブの一覧を開き、 htmlize を選んで下さい。

CSS の設定

出力される html の内容のうち、 スタイルシートの部分をコピーして、テンプレートの設定のスタイルシートの編集でブログに登録しておきます。
このとき、使っていない Face のスタイルは出力されないので、 CSS の登録用で html 出力する場合はなるべくいろいろと色の付いているものにしておいてください。

ちなみに私が貼り付けた CSS は次のようなものです。これでよければこれをスタイルシートに貼り付けてください。

.builtin {
  /* font-lock-builtin-face */
  color: #da70d6;
}
.comment {
  /* font-lock-comment-face */
  color: #b22222;
}
.comment-delimiter {
  /* font-lock-comment-delimiter-face */
  color: #b22222;
}
.constant {
  /* font-lock-constant-face */
  color: #5f9ea0;
}
.function-name {
  /* font-lock-function-name-face */
  color: #0000ff;
}
.keyword {
  /* font-lock-keyword-face */
  color: #a020f0;
}
.string {
  /* font-lock-string-face */
  color: #aaa;
}
.doc {
  /* font-lock-doc-face */
  color: #8b2252;
}
.type {
  /* font-lock-type-face */
  color: #228b22;
}
.variable-name {
  /* font-lock-variable-name-face */
  color: #b8860b;
}
.warning {
  /* font-lock-warning-face */
  color: #ff0000;
  font-weight: bold;
}

色は Emacs で表示中のものが使われます。 色を変えたい場合は Emacs の色設定を変更してから CSS の記述を取得して下さい。

• Emacs の見た目の変更 | プログラマーズ雑記帳

使用

使用する場合には貼り付けたいコードを選択して、 M-x htmlize-region とすると別バッファに html に変換されたものが表示されます。
その body 部分をコピーして貼り付けてください。 < などの変換も一緒に行われています。

もっと便利に

ただこれだとちょっとめんどくさいということで、一気にできる lisp を書きました。 以下のコードを .emacs.el(init.el) に記述して下さい。

(defun ex-htmlize-region-for-paste (abeg aend)
  "Htmlize the region and copy the HTML as a string to clipbord."
  (interactive "r")
  (unwind-protect
      (let* ((beg (min abeg aend)) (end (max abeg aend))
             (htmlbuf (htmlize-region beg end)))
        (with-current-buffer htmlbuf
          (kill-ring-save (plist-get htmlize-buffer-places 'content-start)
                          (plist-get htmlize-buffer-places 'content-end)))
        (kill-buffer htmlbuf))))

(global-set-key "\C-c\M-w" 'ex-htmlize-region-for-paste)

これで領域選択して C-c M-w とすると html に変換した内容をクリップボードにコピーするところまで一気に行います。

この方法だとコードハイライト用の JavaScript を使わなくてもハイライトできますし、 JavaScript を実行しない分ロードも速いです。
(SHJS 入れた意味があまりなくなったけど、まぁいっか)

追記 2012-11-28

Emacs 24 向けの記述を追加しました。