如何配置 emacs 来编辑包含 Javascript 的 HTML 文件？

我已经开始了使用 emacs 编辑同时包含 HTML 标记和 javascript 内容的 HTML 文件的痛苦的第一步。我已经安装了 nxhtml 并尝试使用它-即将其设置为使用 nxhtml-mumamo-mode。Html 文件。但我不喜欢。当我编辑代码的 Javascript 部分时，制表符缩进的行为与编辑 C/C + + 代码时不同。它开始在行内放置制表符，如果您尝试在行前的空白处点击制表符，它将插入制表符，而不是重新制表该行。

另一个我不喜欢的方面是它不像通常的 C/C + + 模式那样做语法着色。我更喜欢在编辑 HTML 文件时使用默认的 java 模式，但是这对 HTML 代码来说并不好用。:-(

1)有没有更好的编辑带有 Javascript 部分的 HTML 文件的模式？

2)有没有办法让 nxhtml 对 javascript 部分使用默认的 java 模式？

问候,

M

18157 次浏览
小开

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

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

提交答案