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

Question

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

Solution 1

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.

Solution 2

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))

Solution 3

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

Solution 4

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).

View more solutions