How do I configure emacs for editing HTML files that contain Javascript?

I have started the painful first steps of using emacs to edit an HTML file with both HTML tags and javascript content. I have installed nxhtml and tried using it - i.e set up to use nxhtml-mumamo-mode for .html files. But I am not loving it. When I am editing the Javascript portion of the code the tab indents do not behave as they do when editing C/C++ code. It starts putting tabs within the line and if you try and hit tab in the white space preceding a line it inserts the tab rather than re-tabifying the line.

Another aspect that I don't like is that it doesn't do syntax colouring like the usual C/C++ modes do. I much prefer the behaviour of the default java-mode when editing HTML files but that doesn't play nicely with the HTML code. :-(

1. Is there a better mode for editing HTML files with Javascript portions?

2. Is there a way to get nxhtml to use the default java-mode for the javascript portions?

Regards,

M

Another solution is multi-web-mode:

https://github.com/fgallina/multi-web-mode

which may be more easily configurable than the already mentioned multi-mode.

You just configure your preferred modes in your .emacs file like this:

(require 'multi-web-mode)
(setq mweb-default-major-mode 'html-mode)
(setq mweb-tags 
  '((php-mode "<\\?php\\|<\\? \\|<\\?=" "\\?>")
    (js-mode  "<script[^>]*>" "</script>")
    (css-mode "<style[^>]*>" "</style>")))
(setq mweb-filename-extensions '("php" "htm" "html" "ctp" "phtml" "php4" "php5"))
(multi-web-global-mode 1)

More on Emacs's multiple multiple modes (sigh) here:

http://www.emacswiki.org/emacs/MultipleModes

UPDATE: simplified the regexps to detect JavaScript or CSS areas to make them work with HTML5 -- no need for super-precise and fragile regular expressions.

I have written the major mode web-mode.el for this kind of usage : editing HTML templates that embed JS, CSS, Java (JSP), PHP. You can download it on http://web-mode.org Web-mode.el does syntax highlighting and indentation according to the type of the block. Installation is simple :

(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.html$" . web-mode))

Great question. Look how many upvotes you got on your first one!

Everyone has the same experience as you. Me too.

Rather than rely on nhtml-mode which exhibited the same sort of strangeness for me as you described, I looked for another option and found multi-mode.el . It's a sort of general-purpose multi-mode skeleton. To use it, you need to specify regular expressions to describe where one mode starts and another one ends. So, you look for <script...> to start a javascript block, and <style...> to start a css block. Then you plug in your own modes for each block - if you like espresso for javascript, use it. And so on for the other regexes that identify other blocks.

In practice, as you navigate through the document, a different mode is enabled for each block.

I used multi-mode to produce an ASP.NET, that allows me to edit C#, HTML, CSS, and Javascript in a single file, with the proper highlighting and fontification depending on where the cursor is in the buffer. It isn't perfect but I found it to be a marked improvement on the existing possibilities. In fact this may be what you want. Try it out.

https://code.google.com/p/csharpmode/source/browse/trunk/aspx-mode.el?r=14

Not really a good solution but a quick fix if you really need to have javascript in your html is to select the region containing javascript and use the command narrow-to-region(C-x n n) and then switch to your preferred javascript mode. The command widen brings you back, (C-x n w).

It sounds like you've setup your nxhtml incorrectly. The only setup necessary should be loading the autostart.el file, and then everything should work to some level. nxhtml isn't perfect in any way, but my experiences from using it for html/css/javascript/mako is pretty good, at least for everything but mako. But I'm pretty sure I've screwed up with the mako-part.

This is how I initialize my nxhtml:

(when (load "autostart.el" t)
  (setq nxhtml-skip-welcome t
        mumamo-chunk-coloring 'submode-colored
        indent-region-mode t
        rng-nxml-auto-validate-flag nil))