5 ms·

Web-mode.el – an Emacs major mode for editing HTML templates

109 points by aespinoza 13y ago

zaking17 13y ago
I was looking for a less-complicated alternative to nxhtml/mumamo and html5.el (which requires xhtml syntax). I've played with web-mode for a few minutes, and it seems great. Handles html, css, js nicely. Only concern so far: javascript variables with underscores do not highlight correctly.
- aespinoza 13y ago
  There are still some bugs, but the author is fast at fixing bugs. I have been working on razor code, and found a bug on Thursday, he fixed it on Friday. What I like the most is the speed. nxhtml/mumamo is too slow and sometimes it is even unusable.
- mnemonik 13y ago
  File a bug with the project. That way the maintainer (or anyone, really) can fix it and make web-mode better for you.
RBerenguel 13y ago
Something I was looking for for a time! For now I used html-mode with mmm-mode (to encode largish javascript chunks in javascript mode.) Looks like I won't be needing it anymore
rsayers 13y ago
I've been fighting with various modes trying to find a usable solution for php/html/js for some time. This is a godsend.
kt9 13y ago
Just installed it and I'm trying to edit my views in PlayFramework that contain scala code as well as javascript in script tags. It seems to be getting confused with the braces in the scala bits and the javascript code.
- aespinoza 13y ago
  He fixed a similar bug for me on Friday. Send him an issue, he'll fix it fast.
- fxbois 13y ago
  Can you post an issue on GitHub with a big template example (on gist.github.com). I'll be happy to add scala compatibility
TeMPOraL 13y ago
Awesome! This is exactly what I need for my daily work with Emacs! (tried mmm before, but it was crazily unstable and slow).
gstovall 13y ago
Just found this the other day. Been working like a charm for HTML and some ERB templates.
rcconf 13y ago
I keep getting: Search failed: "<" whenever I try to indent into a <script> tag. I also don't see any highlighting on the HTML, it's all grey. I guess installation failed for me. (I used marmalade.) I was super excited as xhtml has a large set of problems and I've been looking for a replacement. Did anyone else have similar issues? edit: html is suppose to be grey (I'm not a fan.) and the indentation failure on a script tag still remains. There's a work around, add a newline after the <script> and then indent.
- aespinoza 13y ago
  Check the FAQ here: http://web-mode.org/ http://web-mode.org/ It might be a problem with othere modes: "Syntax coloring does not work Do not enable rainbow-mode or whitespace-mode with web-mode (see above). Moreover, some users might report issues when using themes that not play nicely with web-mode. Tip: when using emacs in a terminal, always try to enable 256 colors compatibility (xterm-256color)." Update: Fixed some typos.
  - rcconf 13y ago
    The only mode that is enabled is Web-mode. I'm using http://emacsformacosx.com/ http://emacsformacosx.com/ with an empty .emacs file to test this.
themckman 13y ago
Anyone know of something similar for Vim?
- Ziomislaw 13y ago
  use evil-mode for vim-in-emacs won't find anything simmilar in vim.
oscillator 13y ago
I've been using multi-web-mode for HTML, CSS and JS recently. This simply switches to a nominated mode when you're inside a block of HTML, CSS, JS, etc. https://github.com/fgallina/multi-web-mode https://github.com/fgallina/multi-web-mode Quite simple and elegant. But something that can work well with Jinja2 would be welcome. I'll take a look at web-mode.
nickstinemates 13y ago
ot feedback: the font aliasing looks strenuous to look at. Maybe reconsider your settings.
fxbois 13y ago
thanks for all those kind words. If you need compatibility with any new template engine, do not hesitate to submit a specific issue on github.
marai2 13y ago
The source is a nice example of pretty clean looking elisp.
philjackson 13y ago
Looks great - going to give it a try tomorrow. I'd love to hear about how you made it, did you generate any of the elisp with another program?
shabble 13y ago
I keep meaning to figure out why this isn't working for me, because trying to use nxhtml-mode along with any sort of templating or embedded script tags is an exercise in frustration. But web-mode (installed via ELPA) doesn't seem to be working at all, and any number of bits of my .emacs.d/ cruft could be to blame. Time for some -Q next reboot, perhaps.
auvrw 13y ago
niiice. perhaps make some edits at the emacs wiki so more people will know there's an alternative to mmm &/or nxhtml?
- mnemonik 13y ago
  > perhaps make some edits at the emacs wiki... It's a wiki, go for it ;)
4dl0v3-p34c3 13y ago
This is kinda against the REST architecture, so I'll stick stick with my customized org-mode script.
alexhutcheson 13y ago
I use this almost every day, and I love it. It really does "just work", even when you throw it files that can be a hideous mix of PHP, HTML, Javascript, inline CSS and whatever else. I actually wrote a quick script that uses Emacs and web-mode to auto-indent collections of files, and it does a much better job than any of the alternatives I've tried previously (even if it can be a little slow on larger directories). It's also now included in bbatsov's Prelude[1] by default, which is nice since it eliminated the needs for the little hacks I was using to disable whitespace mode. All in all, awesome project, and thanks so much for all the work you've put into it! [1] https://github.com/bbatsov/prelude https://github.com/bbatsov/prelude
Grue3 13y ago
I code Django sites and definitely recommend this for Django templates.

109 points by aespinoza 13y ago

I was looking for a less-complicated alternative to nxhtml/mumamo and html5.el (which requires xhtml syntax). I've played with web-mode for a few minutes, and it seems great. Handles html, css, js nicely. Only concern so far: javascript variables with underscores do not highlight correctly.

aespinoza 13y ago
There are still some bugs, but the author is fast at fixing bugs. I have been working on razor code, and found a bug on Thursday, he fixed it on Friday. What I like the most is the speed. nxhtml/mumamo is too slow and sometimes it is even unusable.
mnemonik 13y ago
File a bug with the project. That way the maintainer (or anyone, really) can fix it and make web-mode better for you.

RBerenguel 13y ago

Something I was looking for for a time! For now I used html-mode with mmm-mode (to encode largish javascript chunks in javascript mode.) Looks like I won't be needing it anymore

rsayers 13y ago

I've been fighting with various modes trying to find a usable solution for php/html/js for some time. This is a godsend.

kt9 13y ago

Just installed it and I'm trying to edit my views in PlayFramework that contain scala code as well as javascript in script tags. It seems to be getting confused with the braces in the scala bits and the javascript code.

aespinoza 13y ago
He fixed a similar bug for me on Friday. Send him an issue, he'll fix it fast.
fxbois 13y ago
Can you post an issue on GitHub with a big template example (on gist.github.com). I'll be happy to add scala compatibility

TeMPOraL 13y ago

Awesome! This is exactly what I need for my daily work with Emacs! (tried mmm before, but it was crazily unstable and slow).

gstovall 13y ago

Just found this the other day. Been working like a charm for HTML and some ERB templates.

rcconf 13y ago

I keep getting: Search failed: "<" whenever I try to indent into a <script> tag. I also don't see any highlighting on the HTML, it's all grey. I guess installation failed for me. (I used marmalade.) I was super excited as xhtml has a large set of problems and I've been looking for a replacement. Did anyone else have similar issues? edit: html is suppose to be grey (I'm not a fan.) and the indentation failure on a script tag still remains. There's a work around, add a newline after the <script> and then indent.

aespinoza 13y ago
Check the FAQ here: http://web-mode.org/ http://web-mode.org/ It might be a problem with othere modes: "Syntax coloring does not work Do not enable rainbow-mode or whitespace-mode with web-mode (see above). Moreover, some users might report issues when using themes that not play nicely with web-mode. Tip: when using emacs in a terminal, always try to enable 256 colors compatibility (xterm-256color)." Update: Fixed some typos.
- rcconf 13y ago
  The only mode that is enabled is Web-mode. I'm using http://emacsformacosx.com/ http://emacsformacosx.com/ with an empty .emacs file to test this.

themckman 13y ago

Anyone know of something similar for Vim?

Ziomislaw 13y ago
use evil-mode for vim-in-emacs won't find anything simmilar in vim.

oscillator 13y ago

I've been using multi-web-mode for HTML, CSS and JS recently. This simply switches to a nominated mode when you're inside a block of HTML, CSS, JS, etc. https://github.com/fgallina/multi-web-mode https://github.com/fgallina/multi-web-mode Quite simple and elegant. But something that can work well with Jinja2 would be welcome. I'll take a look at web-mode.

nickstinemates 13y ago

ot feedback: the font aliasing looks strenuous to look at. Maybe reconsider your settings.

fxbois 13y ago

thanks for all those kind words. If you need compatibility with any new template engine, do not hesitate to submit a specific issue on github.

marai2 13y ago

The source is a nice example of pretty clean looking elisp.

philjackson 13y ago

Looks great - going to give it a try tomorrow. I'd love to hear about how you made it, did you generate any of the elisp with another program?

shabble 13y ago

I keep meaning to figure out why this isn't working for me, because trying to use nxhtml-mode along with any sort of templating or embedded script tags is an exercise in frustration. But web-mode (installed via ELPA) doesn't seem to be working at all, and any number of bits of my .emacs.d/ cruft could be to blame. Time for some -Q next reboot, perhaps.

auvrw 13y ago

niiice. perhaps make some edits at the emacs wiki so more people will know there's an alternative to mmm &/or nxhtml?

mnemonik 13y ago
> perhaps make some edits at the emacs wiki... It's a wiki, go for it ;)

4dl0v3-p34c3 13y ago

This is kinda against the REST architecture, so I'll stick stick with my customized org-mode script.

alexhutcheson 13y ago

I use this almost every day, and I love it. It really does "just work", even when you throw it files that can be a hideous mix of PHP, HTML, Javascript, inline CSS and whatever else. I actually wrote a quick script that uses Emacs and web-mode to auto-indent collections of files, and it does a much better job than any of the alternatives I've tried previously (even if it can be a little slow on larger directories). It's also now included in bbatsov's Prelude[1] by default, which is nice since it eliminated the needs for the little hacks I was using to disable whitespace mode. All in all, awesome project, and thanks so much for all the work you've put into it! [1] https://github.com/bbatsov/prelude https://github.com/bbatsov/prelude

Grue3 13y ago

I code Django sites and definitely recommend this for Django templates.