Want better HTML editing features for Emacs? Not happy with Jinja template editing in Emacs? Try this and you won’t be disappointed.

Download web-mode.el from https://raw.github.com/fxbois/web-mode/master/web-mode.el to your local folder (e.g. ~/.emacs.d/custom-modes).

mkdir ~/.emacs.d/custom-modes
wget -P ~/.emacs.d/custom-modes https://raw.github.com/fxbois/web-mode/master/web-mode.el

Now open~/.emacs and add the following lines

(add-to-list 'load-path "~/.emacs.d/custom-modes")

(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.phtml\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.tpl\\.php\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.[agj]sp\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.as[cp]x\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.erb\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.mustache\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.djhtml\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.html?\\'" . web-mode))

;; Indentation for web-mode.el
(setq web-mode-markup-indent-offset 2)
(setq web-mode-css-indent-offset 2)
(setq web-mode-code-indent-offset 2)

Restart Emacs. Now try to edit any HTML, CSS or Jinja template file 🙂