2
3

More than 3 years have passed since last update.

EmacsでHTMLの補完機能をつける

Posted at

EmacsでHTMLの補完機能をつけてみました。

パッケージのインストール

まずは、パッケージのインストール

M-x package-install
Install-package: web-mode

これでパッケージのインストールは完了です。

web-mode.elの編集

次に、web-mode.elの編集をします。
/.emacs.d/init.elファイルに、コードを書いていきます。
web-modeの公式サイトを参考に、自由にカスタマイズしていきます。

init.el
(requere 'web-mode)
(add-to-list auto-mode-alist '("¥¥.html?¥¥'" . web-mode))

(defun my-web-mode-hook ()
  "Hooks for Web mode."

  ;; インデント設定
  (setq web-mode-markup-indent-offset 4)
  (setq web-mode-css-indent-offset 4)
  (setq web-mode-code-indent-offset 4)

  ;; 要素のハイライト
  (setq web-mode-enable-current-element-highlight t)

  ;; フォントの配色
  (set-face-attribute 'web-mode-doctype-face nil :foreground "Pink3")
  (set-face-attribute 'web-mode-html-tag-face nil :foreground "Green")
  (set-face-attribute 'web-mode-html-attr-value-face nil :foreground "Yellow")
  (set-face-attribute 'web-mode-html-attr-name-face nil :foreground "#0FF")

  ;; タグを自動で閉じる
  (setq web-mode-enable-auto-pairing t)
  (setq web-mode-enable-auto-closing t)
)
(add-hook 'web-mode-hook 'my-web-mode-hook)

とりあえず今回はここまで。
またCSSやJSなどについてもやってみようと思います。

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3