EmacsでWebページの作成
環境はGNU Emacs 21.4.1。
HTML、JavaScript、CSSを編集するモードを導入する。
HTML
Emacsで.html拡張子のファイルを編集しようとすると、デフォルトではhtml-modeになる。
今回はhtml-modeの拡張であるhtml-helper-modeを使ってみる。(http://www.santafe.edu/~nelson/tools/)
html-helper-modeを使うには以下のファイルが必要。
- html-helper-mode.el
- tempo.el
- html-font.el
.emacsに以下を記述する。
# wget http://www.santafe.edu/~nelson/tools/html-helper-mode.el
# wget http://www.santafe.edu/~nelson/tools/tempo.el
# wget http://www.nbi.dk/TOOLS/emacs/lisp/html-font.el
(add-hook 'html-helper-load-hook '(lambda () (require 'html-font)))
(autoload 'html-helper-mode "html-helper-mode" "Yay HTML" t)
(setq auto-mode-alist (cons '("\\html?$" . html-helper-mode) auto-mode-alist))
これで色付けされてタグ補完も出来るのだが、html-helper-modeはxhtmlに対応していないので、例えば改行タグを補完すると <br /> ではなく <br> と補完されてしまう。
html-helper-mode.elの
という行を
(textel "\C-c\C-m" nil "html-break" ("<br>\n"))
に修正すると <br /> と補完してくれるようになった。
(textel "\C-c\C-m" nil "html-break" ("<br />\n"))
JavaScript
javascriptを編集するモードとしてはjavascript-mode(javascript.el)が一番有名のようだが、これよりも高機能なjs2-modeというmodeがあったのでこれを入れてみる。（参考 http://d.hatena.ne.jp/m-hiyama/20080627/1214549228）
.emacsに以下を記述する。
# wget http://js2-mode.googlecode.com/files/js2-20080616a.el
# mv js2-20080616a.el js2.el
(autoload 'js2-mode "js2" nil t)
(setq auto-mode-alist (cons '("\\.js$" . js2-mode) auto-mode-alist))
CSS
css-mode(http://www.garshol.priv.no/download/software/css-mode/)を入れる。
.emacsに以下を記述する。
# wget http://www.garshol.priv.no/download/software/css-mode/css-mode.el
(autoload 'css-mode "css-mode")
(setq auto-mode-alist (cons '("\\.css$" . css-mode) auto-mode-alist))
(setq cssm-indent-function 'cssm-c-style-indenter)
※追記
html-helperモードのオートインデントがちゃんと機能しないので、psgmlモードに切り替えた。
(参考 http://www9.plala.or.jp/kirii/computer/psgml.html)
ダウンロード http://www.lysator.liu.se/projects/about_psgml.html
DTDのダウンロード
~/.emacs.d/plugins/psgml-1.3.1/dtd/catalogを作成して以下を記述する。
$ wget ftp://ftp.lysator.liu.se/pub/sgml/ALPHA/psgml-1.3.1.tar.gz
$ tar xzvf psgml-1.3.1.tar.gz
$ wget http://www.w3.org/TR/xhtml1/xhtml1.tgz
$ tar xzvf xhtml1.tgz
$ wget http://www.w3.org/TR/2001/REC-xhtml11-20010531/xhtml11.tgz
$ tar xzvf xhtml11.tgz
$ cp -R psgml-1.3.1 ~/.emacs.d/plugins/
$ mkdir ~/.emacs.d/plugins/psgml-1.3.1/dtd
$ cp xhtml1-20020801/DTD/xhtml1-strict.dtd xhtml1-20020801/DTD/xhtml1-transitional.dtd xhtml11-20010531/DTD/xhtml11.dtd ~/.emacs.d/plugins/psgml-1.3.1/dtd/
~/.emacsに以下を記述する。
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" xhtml1-strict.dtd
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" xhtml1-transitional.dtd
PUBLIC "-//W3C//DTD XHTML 1.1//EN" xhtml11.dtd
;;;; psgml
(add-to-list 'load-path "~/.emacs.d/plugins/psgml-1.3.1")
(autoload 'sgml-mode "psgml" "Major mode to edit SGML files." t)
(autoload 'xml-mode "psgml" "Major mode to edit XML files." t)
(setq auto-mode-alist (append
'( ("\\.\\(xml\\|htm\\|html\\)$" . xml-mode)) auto-mode-alist))
(setq sgml-catalog-files '("dtd/catalog"))
