With Emacs - 4.2 HTML や CSS を編集するためのパッケージ

ここでは、旧 Windows で Mule を使うのページで説明していた内容と、おまけに CSS を編集することにも触れます。パッケージとあるのは、なんらかの機能を果たす、プログラムの集まりと考えればよいでしょう。

それでは、実際に Emacs で HTML を編集するところです。 Emacs では、lisp というプログラミング言語により、その機能を拡張することができます。たとえば、ここで扱う html-helper-mode なら、タグを色付けして、編集しやすくすることが可能です。なお、HTML を編集するためのパッケージには、yahtml などもあります。筆者はそちらへ YaTeX モード (組版システム LaTeX 用のモード) ともども移行しようかと考える今日このごろでした...

e-lisp パッケージのダウンロード

まずは、HTML 編集のための Emacs-lisp パッケージを入手します。 Nelson Minar 氏による html-helper-mode を、 http://www.santafe.edu/~nelson/tools/ ( 英語です ) から入手します。必要なのは、 tempo.el と、 html-helper-mode.el です。ダウンロード後のファイルの置き場所については、 4.1 パッケージの追加方法を参照してください。

必要な設定

新しい機能を追加したら、それを設定しなくてはいけません。やはり、.emacs を開いて、以下のように書き込んでください。この設定をすれば、自動的に先ほどの 2 つのファイルが読み込まれ、 html という拡張子のファイルを開くと、自動的に html-helper-mode になります。なお、以下の設定は、Emacs 20.x でも Mule でも同様です。 ( Mule では 4.1 のようにロードパスを追加する必要があるのをお忘れなく !! )

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

ハイライト

まずは次の一行を追加してください ( Mule の場合など、ほかで記述していればいりません )。

(if window-system (require 'hilit19))

とりあえずは、色が変わるようにしたいのですが、新しく編集しても色は変わりません。手動で、Ctrl-Shift-l を打ってみてください。色の変化が反映されます。 Ctrl-Shift-l は、コントロールキーを押しながら、 Shift キーと L のキーを同時に押すという意味です。

変更時間自動挿入

Web ページの場合、更新した日付を入れるということがよくありますが、これは、それを自動的にしようというものです。毎回更新のたびに、Last Update:xxxx/xx/xx なんていうのは面倒です。そこで、HTML ファイルを編集し、セーブしたときに、自動的に更新日を入れる方法です。設定ファイル .emacs に以下の一行を加えてください。先ほどの設定 ( 2. 必要な設定 ) の次の行がよいでしょう。

(setq html-helper-do-write-file-hooks t)

あとは、自動で更新日時を入れてほしい HTML ファイルの希望の場所に、


というコメントを入れます。そして、セーブすると、その間に、
Last modified: Fri Dec 03 17:49:32 1999
のような文字列が入ります。

CSS 編集モード

CSS 編集用のモードとして、 css-mode ( http://www.garshol.priv.no/download/software/css-mode/ ) が、Lars Marius Garshol 氏により作成されています。 css-mode.el をダウンロードしたら、さきほどと同様に、 css-mode とでも名前を付けたディレクトリを作り、これを保存します。 ( 必要な設定は、4.1 に従っておこないます ) そして、以下の設定を .emacs に追加すれば .css の拡張子を持つファイルを開くと、自動的に css-mode にかわります。

(autoload 'css-mode "css-mode")
(setq auto-mode-alist (cons '("\\.css$" . css-mode) auto-mode-alist))