コードハイライトを楽にする emacs-lisp

前回、ブログでコードハイライトする方法を書きました。ただ、色が変わったのはいいのですが、< などを置換するのはめんどくさいです。

また、Emacs の手放せない私としては文章書くとき、ちょっと長い文章であれば Emacs で書いて貼り付けてます。ブログ書くときもいったん html-mode で書いて、ブラウザに貼り付けた後文字の修飾などやって書いています。

Emacs を使っていてめんどくさいことがあればどうするか。もちろん lisp を書きます。
そこで、貼り付けたときに自動で置換してくれる Emacs の lisp を作ったので、紹介します。


設定

後で拡張しやすいように minor mode で機能を作りました。
以下のファイルをダウンロードして、パスの通っているところにおいてください。

ex-html-mode.el

.emacs.el に以下のコードを追加すると html-mode にしたときに ex-html-mode にもなるようになります。

(autoload 'ex-html-mode "ex-html-mode" "Minor mode for html edit" t)
(add-hook 'html-mode-hook 'ex-html-mode)

特に html-mode でなくてもかまわないので、そのときは add-hook で変更して下さい。


使用

ex-html-mode にすると以下のキーで機能を呼び出せます。

C-c C-y

コードの貼り付け

C-c C-q

選択領域のクオート

C-c C-y で貼り付けた場合、コードの言語を聞いてくるので指定するとコード指定した <pre> をつけて中身をクオートして貼り付けます。
言語に何も指定しないと pre とクオートのみ行います。


コードハイライトを変える

ex-html-mode のコードの貼り付けはデフォルトでは SHJS 用ですが、変えることも出来ます。

例えば SyntaxHighlighter を使う場合は .emacs.el に以下の行も書いておきます。

(setq ex-html-code-class-alist
  '(("c", "cpp")  ("cpp", "cpp") ("csharp", "csharp") ("java", "java")
    ("pascal", "pascal") ("python", "python") ("ruby", "ruby")
    ("js", "js") ("php", "php") ("css", "css") ("xml", "xml") ("html", "xml")))
(setq ex-html-code-class-format "name=\"code\" class=\"%s\"")

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 向けの記述を追加しました。

ex-html-mode リンク挿入機能追加

ブログの記述用に以前、私が作成した html 編集用の lisp に機能追加しました。
ex-html-mode.el

追加機能は以下の 3 点。

• Customize に対応
• あらかじめ登録しているリンクの挿入
• クリップボードにコピーしている URL をリンクとして貼り付け

Customize に対応

Customize 画面での設定ができるようにしました。 Customize については前の記述を見てください。
http://yohshiy.blog.fc2.com/blog-entry-23.html

ブラウズから探す場合は Emacs/Languages/Sgml の下に Ex Html という名前のグループが出来ています。

直接グループ名を指定する場合は ex-html と指定してください。

グループのオートロードの方法がわからなかったので、html-mode にして 一回 ロードしていないと追加されていません。

あらかじめ登録しているリンクの挿入

C-c i l

お気に入りのようにあらかじめ登録している URL から選択してリンクを挿入します。
登録は .emacs.el に記述するか、カスタマイズ画面で行なってください。


選択のためのキーワード、リンク先アドレス、新規ウィンドウで開くかどうか、表示名を指定します。
表示名が空欄の場合はリンク先アドレスが表示名に使用されます。

クリップボードにコピーしている URL をリンクとして貼り付け

C-c i C-y

クリップボードにコピー中の URL をリンクとして貼り付けます。
貼り付けの際表示名を聞かれます。空欄にした場合はリンク先アドレスが表示名に使用されます。
領域を選択している場合には、領域内の文字列が表示名になります。
C-uの後に実行(C-u C-c i C-y)している場合には、リンクは新規 Window としてのリンクとなります。

やさしいEmacs‐Lisp講座 (2011/06) 広瀬 雄二 商品詳細を見る