What mode do people use when using Emacs to edit web pages that contain CSS, javascript, and HTML? - Stack Overflow

admin2025-01-20 23

typically the code is something like:

<html>
  <head>
    <style type="text/css">
       body { font-size:12pt; font-family: Arial;}
        ....
    </style>
    <script type="text/javascript" src="jquery.1.3.2js"></script>
    <script type="text/javascript">
    <!--
        $(document).ready(function(){
          ...
        });
        ...
    -->
    </script>
    <meta ... />
  </head>
  <body>
    <div>
      <p>
       ....
      </p>
      ...
    </div>
    ....
  </body>
</html>

I like javascript-mode for the syntaxt highlighting and indenting. Likewise for sgml-mode for the HTML. Also I get auto-complete on the open tags. Css-mode is not so important so it's not so much a priority.

That's 3 disparate languages and 3 modes. Right now I've been swapping modes manually as I edit different sections. This works, sort of.

Anyone got a better approach?

typically the code is something like:

<html>
  <head>
    <style type="text/css">
       body { font-size:12pt; font-family: Arial;}
        ....
    </style>
    <script type="text/javascript" src="jquery.1.3.2js"></script>
    <script type="text/javascript">
    <!--
        $(document).ready(function(){
          ...
        });
        ...
    -->
    </script>
    <meta ... />
  </head>
  <body>
    <div>
      <p>
       ....
      </p>
      ...
    </div>
    ....
  </body>
</html>

That's 3 disparate languages and 3 modes. Right now I've been swapping modes manually as I edit different sections. This works, sort of.

Anyone got a better approach?

Share Improve this question edited Dec 15, 2009 at 19:09 asked Dec 15, 2009 at 18:35 Cheeso 192k105 gold badges484 silver badges734 bronze badges

15 I see that on emacs questions often. Let me ask you: if I had asked how to set the code font in a Visual Studio window, or how to reconfigure an Eclipse perspective, would it belong on superuser? – Cheeso Commented Dec 15, 2009 at 18:49
2 No, because those are tools for programmers. :P – Frank Schwieterman Commented Dec 15, 2009 at 19:10
10 I'd like to see the rules amended that in order to get an Emacs question bumped to superuser.com, one of the voters must be Trey Jackson. There is entirely too much knee-jerk reaction to Emacs questions belonging elsewhere, IMHO. – pajato0 Commented Dec 15, 2009 at 19:51
@Frank, you are spoiling for a fight. . . ! – Cheeso Commented Dec 15, 2009 at 20:00
1 @pajato0 ha! ____ Though I do agree with the general feeling that it is a bad thing that Emacs questions get split between two communities (SO and SU). e.g. on SU, there are roughly same number of visual studio (80) questions as emacs (70), but on SO, there are an order of magnitude more visual studio (10k) as emacs (1k). Of course this comment belongs on meta... – Trey Jackson Commented Dec 17, 2009 at 0:13

Add a comment |

6 Answers 6

Sorted by: Reset to default 25

Ever since web-mode came to existence, I have gotten rid of mumamo and nxhtml. web-mode is easier to use and install. For a start, it uses different syntax highlighting and indentation of a mixed js/html/css file. But for me the really handy thing about it is that it works in other templating languages. Here's an example configuration from their website:

(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.phtml\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.tpl\\.php\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.jsp\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.as[cp]x\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.erb\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.mustache\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.djhtml\\'" . web-mode))

I think mumamo is generally used for this. http://www.emacswiki.org/emacs/MuMaMo

I use nXhtml for emacs. Quoting from the page

One of the main parts of nXhtml is nxhtml-mode, a GNU Emacs major mode that builds on nxml-mode. It knows about XHTML syntax and can check this as you type. It can also tell you what tags and attributes you can use at a certain point and help you insert them.

That feature, which we call completion, is one of the main features of this mode. Another important feature is the ability to mix several languages in one buffer and get the correct syntax highlighting and indentation for each of them.

I'd be loathe to call my approach better, but fwiw, I avoid this situation like the plague by putting CSS into .css files and javascript into .js files and then put "include" tags in the html file. Then Emacs handles each nicely. Admittedly, having three, large monitors with full screen Emacs on each makes side by side buffers containing the files I need hardly painful at all. -:) And it doesn't work real well in an enterprise environment where I don't have control over what other engineers choose to do.

By way of comparison, here are some of the available modes, as of 2014-07-04:

| library        | files | size    | last update | url                                                 |
|----------------+-------+---------+-------------+-----------------------------------------------------|
| web-mode       |     1 |  279 kb |  2014-07-03 | https://github.com/fxbois/web-mode                  |
| polymode       |     7 |  120 kb |  2014-06-14 | https://github.com/vitoshka/polymode                |
| mmm-mode       |    17 |  185 kb |  2014-02-12 | https://github.com/purcell/mmm-mode                 |
| multi-web-mode |     1 |   16 kb |  2013-08-23 | https://github.com/fgallina/multi-web-mode          |
| mumamo         |   115 | 3090 kb |  2010-04-25 | http://ourcomments.org/Emacs/nXhtml/doc/nxhtml.html |
| multi-mode     |     1 |   23 kb |        2009 | http://www.loveshack.ukfsn.org/emacs/multi-mode.el  |

Also added to the Emacs Wiki: http://www.emacswiki.org/emacs/MultipleModes

Multi-web-mode is relatively new and is being actively updated, grab it from elpa (package.el)

You can see the source and docs here https://github.com/fgallina/multi-web-mode

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1737372030a39181.html

最新回复(0)