25

I love emacs,

and I want to do my web-programming work in it,
but I can't find a way to get it to edit HTML properly.

I mean it's seriously awful.

It will do HTML fine, but not PHP, javascript, etc.

I tried getting html-helper-mode... I downloaded it, put it in /usr/local/share/emacs/site-lisp, and added it to my .emacs file:

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

copied and pasted from some site (I don't know elisp).
it just, doesn't highlight anything at all.

I tried downloading a whole bunch of modes and using some other mode to string them together, to no avail.

Emacs is so great in every other way--why can't it do the simple task of editing web pages? I mean, it's a pretty standard thing to do for editors these days.

So, does anyone know how to do this?

Oliver Salzburg
  • 89,072
  • 65
  • 269
  • 311
Carson Myers
  • 3,131

6 Answers6

42

I had the same problem as you so I decided to write web-mode.

enter image description here

Web-mode.el is a major mode for Emacs that is intended for editing mixed web templaces (HTML with Java/JSP, PHP, CSS, JavaScript).

It doesn't rely on any other mode. It does syntax highlight et indenting according to the code block type. I've written a little HOWTO page on

About

  • web-mode.el is a major-mode for editing web templates (HTML with PHP, Java/JSP, JavaScripts, CSS styles).
  • web-mode.el is will never be a full featured PHP or JS mode. (We don’t encourage multi-lines blocs of code in templates !).

Native Features

  • smart indentation (according to the context : HTML, PHP, Java/JSP, JavaScript or CSS)
  • code navigation : C-c C-n between opening and closing HTML tag or between PHP controls > - if ... else ... endif, for ... endfor
  • HTML tag autoclosing (after
  • syntax highlighting (according to the type of bloc)
  • snippet insertion C-c C-i (auto indented, aware of text selection)
  • auto-inserts (ex. ?> after <?php)
Oliver Salzburg
  • 89,072
  • 65
  • 269
  • 311
fxbois
  • 521
  • 4
  • 4
6

Have you checked out Emacs Wiki html page? nxhtml in particular looks useful.

luapyad
  • 353
5

I've been dissatisified with the available modes, but I have found happiness recently using plain old html-mode augmented with yasnippet and tidy.el. As the other answers have mentioned nxhtml mode is useful if you are writing xhtml.

If you are wanting to get highlighted php and javascript, you might want to look at mmm-mode, which will allow you to run multiple major modes at once. I've never used it, so I don't know who it handles conflicting key bindings, etc... so you'll have to feel your way around there.

Pinochle
  • 355
4

Give multi-web mode a try, it's a minor mode designed with web editing in mind, it selects the appropriate major when the point moves around.

skwee rell
  • 41
1

I too use nXhtml mode for mixed mode editing having failed to get Multiple Modes working correctly. It has been a bit of a rocky ride but recent builds have proved to be useful. I'm running with Emacs 23 FWIW.

stsquad
  • 509
0

I'm running Ubuntu 18.04 with emacs 25 and recently need a multimode capability for javascript and css in HTML. Researching this last night, I settled on polymode. Not many examples out there so here's a simple config for javascript and css in HTML:

;; https://polymode.github.io/installation/#activation-of-polymodes
(require 'polymode)

(define-hostmode poly-html-hostmode
    :mode 'html-mode)

(define-innermode poly-html-js-metadata-innermode
    :mode 'js-mode
    :head-matcher "^[ \t]*<script.*>"
    :tail-matcher "^[ \t]*</script.*>"
    :head-mode 'host
    :tail-mode 'host
    :body-indent-offset '2
 )

(define-innermode poly-html-css-metadata-innermode
    :mode 'css-mode
    :head-matcher "^[ \t]*<style.*>"
    :tail-matcher "^[ \t]*</style.*>"
    :head-mode 'host
    :tail-mode 'host
    :body-indent-offset '2
 )

 ;; html host with js and css innermodes
 (define-polymode poly-html-mode
     :hostmode 'poly-html-hostmode
     :innermodes '(poly-html-js-metadata-innermode
                    poly-html-css-metadata-innermode)
 )

 ;; set mode for html files
 (add-to-list 'auto-mode-alist '("\\.html\\'" . poly-html-mode))

I put this type of stuff in a local elisp file and load it my .emacs for testing and factoring.

dturvene
  • 191