Tag Archives: mode

Edit html/css/javascript files with emacs!

Recently I need to develop some web widgets using html/javascript/css. Of course, I will use my favorite editor: Emacs.

The original emacs mode for html: html-mode and html-helper-mode are not good. They cannot tell the javascipt and css part of the html files a lot of time.

After google-ing these days, I found a very good mode for html editing. It is call multi-web-mode. You can download it like this:

cd ~/.emacs.d/
git clone https://github.com/fgallina/multi-web-mode.git

Then, add the following lines into your ~/.emacs:

(when
    (load
     (expand-file-name "~/.emacs.d/multi-web-mode/multi-web-mode.el"))
  (package-initialize))
(setq mweb-default-major-mode 'html-mode)
(setq mweb-tags '((php-mode "<\\?php\\|<\\? \\|")
		  (espresso-mode "]*>" "")
		  (css-mode "]*>" "")))
(setq mweb-filename-extensions '("php" "htm" "html" "ctp" "phtml" "php4" "php5"))
(multi-web-global-mode 1)

It should just work!

If you don’t have the esspreso-mode with you, which is the mode we use to edit javascript, you can download it from the following address and place it under ~/.emacs.d/

http://download-mirror.savannah.gnu.org/releases/espresso/espresso.el

and add the following to your ~/.emacs:

autoload #’espresso-mode “espresso” “Start espresso-mode” t)
(add-to-list ‘auto-mode-alist ‘(“\\.js$” . espresso-mode))
(add-to-list ‘auto-mode-alist ‘(“\\.json$” . espresso-mode))

Right now, everything should be fine. ::)

Enjoy your web front-end programming!

Tagged , , , , ,