Emacs で HTML

html-helper-mode とは

Emacs で HTML を編集するためのマクロ(Emacs Lisp プログラム)としては, YaTeX に含まれる yahtml がありますが,ここでは,かの Marc Andreessen 作の html-mode に基づいて Nelson Minar が作った html-helper-mode があります。 現在は Gian Uberto Lauri が保守をしています(が私は Nelson Minar の最終バージョンを使っています)。

インストール

ここでは Nelson Minar の HTML helper mode beta のページから html-helper-mode.el と tempo.el をダウンロードして使うことにします。 これらは elisp 用のパスの通ったところ(たとえば /usr/local/share/emacs/site-lisp/)に入れておきます。

html-helper-mode を使うには,.emacs に

(autoload 'html-helper-mode "html-helper-mode" "Yay HTML" t)
(setq auto-mode-alist (cons '("\\.html$" . html-helper-mode) auto-mode-alist))

のように付け加えます。 拡張子が .html のファイルを読み込むと自動的に HTML helper モードになります。 あるいは,拡張子とモードの対応は次のように一括指定することもできます。

(setq auto-mode-alist
      (append
       '(
	 ("\\.h$"    . c++-mode)
	 ("\\.hpp$"  . c++-mode)
	 ("\\.txt$"  . text-mode)
	 ("\\.message$" . text-mode)
	 ("\\.htm" . html-helper-mode)
	 ("\\.shtml$" . html-helper-mode)
	 ("\\.php" . html-helper-mode)
	 ) auto-mode-alist))

カスタマイズ

html-helper-mode はいろいろカスタマイズ(自分好みに作り替え)できます。 たとえば .emacs に次のように書いておけば,.html ファイルを作った瞬間にいろいろ決まり文句が入れられます。 下は一例ですので,名前の部分などは必ず書き換えてお使いください。


(defvar html-helper-new-buffer-template
  '("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\">\n"
    "<html lang=\"ja\">\n"
    "<head>\n"
    "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=EUC-JP\">\n"
    "<title>" p "</title>\n"
    "<link rel=\"stylesheet\" type=\"text/css\" href=\"/~okumura/style.css\">\n"
    "<script type=\"text/javascript\" src=\"/~okumura/head.js\"></script>\n"
    "</head>\n"
    "<body>\n\n<h1>" p "</h1>\n\n" p
    "\n\n<hr>\n\n<p class=\"noindent\">リンクはご自由にどうぞ。\n\n"
    "<p class=\"noindent\"><a href=\"http://www.matsusaka-u.ac.jp/\">松阪大学</a>\n"
    "<a href=\"/~okumura/\">奥村晴彦</a>\n"
    "<a href=\"mailto:okumura@matsusaka-u.ac.jp\">"
    "okumura@matsusaka-u.ac.jp</a>\n\n"
    "<p class=\"noindent\">\n"
    html-helper-timestamp-start
    html-helper-timestamp-end
    "\n</body>\n</html>\n")
  "*Template for new buffers, inserted by html-helper-insert-new-buffer-strings if
html-helper-build-new-buffer is set to t")

この html-helper-new-buffer-template の定義を書き換えれば,ファイルの初期状態の設定が自由にできます。 p という文字が入っているところは M-C-f で順に飛ぶことのできるポイントです(M-C-b で一つ戻ります)。

また,

<!-- hhmts start -->
<!-- hhmts end -->

と書いておけば,ファイルを保存したときに

<!-- hhmts start -->
Last modified: Sat Sep 14 20:14:06 JST 2002
<!-- hhmts end -->

のように日付・時刻が自動的に付くので非常に便利です。 ただし,一部の html-helper-mode.el のバージョンでは

(defvar html-helper-timestamp-start "<!-- hhmts start --> "

となっているところを

(defvar html-helper-timestamp-start "<!-- hhmts start -->\n"

と書き換える必要があります。

日付を Last modified: 2002-09-14 20:14:06 のような形式にするには,.emacs に次のように書いておけばいいでしょう。

(add-hook 'html-helper-timestamp-hook
	  (function (lambda ()
		      (insert "Last modified: "
			      (format-time-string "%Y-%m-%d %T\n")))))

html-helper-mode キーバインド一覧

M-TAB           補完
M-C-f           次のポイントに進む
M-C-b           前のポイントに戻る
M-C-t           タイムスタンプ挿入の目印コメントを入れる

C-c C-b t       <title></title>
C-c C-b i       <isindex>
C-c C-b n       <nextid>
C-c C-b l       <link href="">
C-c C-b b       <base href="">

C-c C-t 1       <h1></h1>
C-c C-t 2       <h2></h2>
C-c C-t 3       <h3></h3>
C-c C-t 4       <h4></h4>
C-c C-t 5       <h5></h5>
C-c C-t 6       <h6></h6>

C-c C-a n       <a name=""></a>
C-c C-a l       <a href=""></a>

C-c C-s p       <pre></pre>
C-c C-s b       <blockquote></blockquote>
C-c C-s e       <em></em>
C-c C-s s       <strong></strong>
C-c C-s c       <code></code>
C-c C-s x       <samp></samp>
C-c C-s r       <cite></cite>
C-c C-s k       <kbd></kbd>
C-c C-s v       <var></var>
C-c C-s d       <dfn></dfn>
C-c C-s a       <address></address>
C-c C-s q       <q></q>
C-c C-s n       <person></person>
C-c C-s y       <acronym></acronym>
C-c C-s .       <abbrev></abbrev>
C-c C-s m       <cmd></cmd>
C-c C-s g       <arg></arg>
C-c C-s l       <lit></lit>

C-c C-p b       <b></b>
C-c C-p i       <i></i>
C-c C-p u       <u></u>
C-c C-p f       <tt></tt>
C-c C-p x       <s></s>
C-c C-p ^       <sup></sup>
C-c C-p _       <sub></sub>
C-c C-p r       <render tag="" style="">   

C-c C-l o       <ol><li></ol>
C-c C-l u       <ul><li></ul>
C-c C-l r       <dir><li></dir>
C-c C-l m       <menu><li></menu>
C-c C-l d       <dl><dt><dd></dl>
C-c C-l i       <li>  または  <dt><dd>
C-c C-l l       <li>
C-c C-l t       <dt><dd>

C-c C-n a       <abstract></abstract>
C-c C-n n       <note role=""></note>
C-c C-n f       <footnote></footnote>
C-c C-n m       <margin></margin>

C-c C-f f       <form action=""></form>
C-c C-f t       <input name="" size="">
C-c C-f i       <input type="INT" name="" size="">
C-c C-f .       <input type="FLOAT" name="" size="">
C-c C-f d       <input type="DATE" name="" size="">
C-c C-f u       <input type="URL" name="" size="">
C-c C-f c       <input type="CHECKBOX" name="">
C-c C-f r       <input type="RADIO" name="">
C-c C-f g       <input type="IMAGE" name="" src="">
C-c C-f s       <input type="SCRIBBLE" name="" size="">
C-c C-f a       <input type="AUDIO" name="">
C-c C-f b       <input type="SUBMIT" value="">
C-c C-f x       <input type="RESET" value="">
C-c C-f p       <textarea name="" rows= cols=></textarea>
C-c C-f c       <select name=""></select>

C-c C-i i       <img src="">
C-c C-i t       <img alt="" src="">
C-c C-i a       <img align="" src="">
C-c C-i e       <img align="" src="" alt="">

M-RET           <p>
C-c -           <hr>
C-c RET         <br>

C-c &           &amp;
C-c <           &lt;
C-c >           &gt;
C-c SPC         &nbsp;

奥村晴彦

Last modified: 2004-04-25 14:08:33