プログラマーズ雑記帳

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

また、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\"")

前に、ブログにコードハイライトの 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 入れた意味があまりなくなったけど、まぁいっか)

以前作成したブログの記述用に html-mode を拡張する lisp を更新しました。

• http://yohshiy.blog.fc2.com/?tag=ex-html-mode.el
• ex-html-mode.el

ちなみに lisp ファイルのリンク先は Subversion なので、どの記事のリンクでも最新版へのリンクとなってます。

• リンク貼り付けでの C-u の動作変更
• エスケープ文字、空白の挿入
• 自動改行の考慮
• リンク、テーブルの挿入

リンク貼り付けの動作変更

C-c i C-y でクリップボードの文字列をリンクとして貼り付ける機能を付けていました。また、 C-u の後では新規ウィンドウでのリンクにしていたのですが、新規ウィンドウでのリンクの方をよく使っていたので、逆にしました。
つまり C-u C-c i C-y で新規ウィンドウで開かないリンクとなります。

エスケープ文字と空白の入力

<, >, & の HTML で使えない文字と空白を入力するためのキーワードの入力機能を付けました

キー	挿入文字
C-c &	&
C-c <	&lt;
C-c >	&gt;
C-c [SPC]	&nbsp;

自動改行の考慮

ブログでは改行を自動的に <br /> にするモードとそのまま html とするモードがあります。 これを考慮するようにしました。
ex-html-target-mode-auto-newline の変数を nil に設定すると [Enter] で改行する時に<br /> を入力してから改行するようになります。
タグを入力せずに改行したい場合には C-j で改行してください。

リンク、タグの挿入

html の各リンク、テーブルを挿入する機能を付けました。

C-c i u

リスト(番号なし)

C-c i o

番号付きリスト

C-c i d

定義リスト(今書いているのに使っているリスト)

C-c i t

テーブル

番号あり、なしのリストの場合、リスト項目が順次聞かれます。リスト項目に何も入力しないと終了します。
定義リストの場合には、定義名と定義の説明が聞かれます。 定義名を聞かれた時に何も入力しないと終了です。定義の説明には何も入力したくない時があるので、 何も入力しなかった場合は何も入力しないだけにしています。
テーブルは先頭行はヘッダで決め打ちにしています。 最初にヘッダのカラムを入力していき、空入力でヘッダの入力を終わります。 その後、各カラムの内容を聞かれます。先頭カラムで何も入力しないと終了します。

前節の自動改行用のモードが non-nil の場合、改行が入らないようにつなげて入力されます。

html モードのタグ挿入(C-c C-t) のように領域選択で動作を変えようかなともちょっと思いました。 しかし、 ul, ol はいいのですが、 定義リストやテーブルでできません。
: や, を置換してもいいかなとも思ったのですが、やりすぎると rdoc のようなフォーマットで書いて変換した方が早い気がしてやめてしまいました。

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