When doing this:

    <script type="text/javascript">
    var x = $("<a></a>");
    </script>

hitting the '/' in the closing 'a' causes completion of '</script>'...

If I run emacs in a GUI (Mac OS X) then typing <span> </ results in the closing </span> being auto-completed for me. This does not happen in cli Emacs (run with emacs -nw).

You should add autoload cookies, so that package managers can process them.

;;;###autoload
(defgroup web-mode ...

;;;###autoload
(defgroup web-mode-faces ...

;;;###autoload
(define-derived-mode web-mode ...

I just found web-mode and really like it so far. I have had trouble getting used to the key bindings since they are different than most modes.

In particular, C-; for adding a comment is used by almost every programming mode.

The tag matching is very nice, but you might also consider using the balanced expression keys: http://www.emacswiki.org/emacs/NavigatingParentheses#toc1

C-M-n Move forward over a parenthetical group
C-M-p Move backward over a parenthetical group
C-M-f Move forward over a balanced expression
C-M-b Move backward over a balanced expression
C-M-k Kill balanced expression forward
C-M-SPC put the mark at the end of the sexp.

Thanks for the great mode. Emacs has needed something better for HTML.

Some of the defcustom variables have incorrect type bool which breaks customization:

(defcustom web-mode-disable-auto-pairing (not (display-graphic-p))
"Disable auto-pairing."
:type 'bool
:group 'web-mode)

(defcustom web-mode-enable-whitespaces nil
"Enable whitespaces."
:type 'bool
:group 'web-mode)

(defcustom web-mode-enable-server-block-background nil
"Enable server block background."
:type 'bool
:group 'web-mode)

(defcustom web-mode-comment-style 1
"Comment style : 2 = server comments."
:type 'bool
:group 'web-mode)

How can i use web-mode with yasnippet?

Consider the following code snippet:

    <p>
Plain text that is outdented between matching tags cannot be indented via tab.
    </p>

When I position tab at the beginning of the second line and press the Tab key, nothing happens.

This is not a situation I encounter frequently, but it tends to crop up when copy/pasting plain text from a member of our marketing team.

Tested with current master, using Aquamacs 2.4 (a.k.a Emacs 23.3.50.1).

While comparing nxhtml and web-mode I found a nice feature which could be nice to have in web-mode as well.

In PHP you can have heredoc, so that you can have multiple line strings terminated with an arbitrary separator string (here: EOT):

$var = <<<EOT
some text
EOT;

When generating HTML with PHP one can use code like this:

$html .= <<<EOT
  <div>
    <p>some text</p>
  </div>
EOT;

It would be nice if the embedded HTML code would be syntax colored as HTML, but how? NXHTML has a trick for that: if you use a separator string which ends with the name of the mode within the heredoc, then nxhtml can correctly color the contents of this string as HTML:

$html .= <<<EOTHTML
  <div>
    <p>some text</p>
  </div>
EOTHTML;

And it works for javascript too, or any other embedded code, you just have to specify the desired mode name in the separator:

$html .= <<<EOTJAVASCRIPT

  function func()
  {
    dosomething();
  }

EOTJAVASCRIPT;

It would be nice to have this in web-mode.

With the following snippet:

<img src="css/img/certIMG.jpg" class="floatRight pushRight" />

<div class="clear"></div>

highlight the first line by placing point at the beginning of the next line, setting mark, and moving up one line.

Press C-;.

The first line will be commented correctly, but the blank line vanishes. That is not the behavior exhibited by php-mode or python-mode, so I'm guessing it is not the desired behavior.

Tested with current master in Emacs 23.3.50.1

M-; still bind to comment-dwim and make wrong commenting (sometime with promp to comment-start value).

It will be more convenient to bind web-mode-comment-or-uncomment to M-; also.

Also web-mode-comment-or-uncomment doesn't follow comment-dwim conventions when work on selected regions and doesn't make outline comment without selection (that another story)...

I updated to v3.0 just now and it appears the font lock behavior has an issue (the buffer loses font color after a few keystrokes, and fontify-buffer seems to have no effect).

Is this a known issue?

So I have web-mode Version: 5.0.0 and .jsp file:

<html>
  <c:if></  <=== cursor here, I just type '/'!!
<html>

when I type '/' I get html as completion but expect c:if.
<c:if> highlighted as web-mode-preprocessor-face.

Hello, I'm a user of web-mode.el, but I'm not very familar with emacs, and some problem happened when I use it.

When I finished a line programming and press ENTER, the code will not automatic indent, I don't know why, like the following example:

       <?php  ?>

When I press ENTER after the "<?php", it will like following:

       <?php 

?>

The "?>" can't automatic indent correctly, even though I press TAB again and again.

The same phenomenon will appear when I end a html sign, like this:

When I press ENTER and type "</", the "" will appear, but it will like this:

Though I can use TAB to indent, but not automatic, I want to know how to solve it.

Thanks!

With Emacs from 6.m4.2013 from bzr, and web-mode from today from git:

1. emacs -Q
2. add to load path and (require 'web-mode)
3. open file.html
4. M-x web-mode
5. M-x undo
   Result: you CAN undo (undo what? No text was modified) and you lose syntax highlighting.
   Should happen: "No further undo information"

Yasnippet is not getting along with web-mode. If you try to insert a snippet, let's say, the html tag, you have to type "html" and then press TAB. When you do this, you choose which completion you want (I'm using yas/dropdown-prompt to show my prompt).

After that, the pair of <html></html> and the cursor will be moved to the line between them. After this, we'll notice some bugs:

• The highlight doesn't update by itself
• If I press TAB or any other key that does not insert characters, the cursor won't move

I could work around this bug using the following piece of code:

(defun yas-web-mode-fix ()
  (web-mode-insert-and-indent "\t")
  (indent-for-tab-command)
  (save-excursion
    (web-mode-tag-end)
    (indent-for-tab-command))
  (if (not (string-match "\\`[ \t\n\r]+$" (thing-at-point 'line)))
      (delete-horizontal-space)))
(setq yas/after-exit-snippet-hook 'yas-web-mode-fix)

I could restrict this to run only when web-mode is the major mode, but I didn't find any problems in other modes so far. Let me know if I can help with any other information. Thanks.

See https://github.com/magnars/expand-region.el/issues/84.

expand-region is a very useful mode for expanding the current selection incrementally. One of the latest builds of web-mode broke the little support it had for the mode.

The best way to make those play well together is to provide a few expansion functions to assist incremental selection, like expand-region does with other modes.

Using both expand-region and web-mode would be awesome.

Consider the following code snippet:

{#
    This is a test comment. Imagine I was writing some lengthy explanation
    of an odd subtlety in this template's behavior, and at some point, I
    reached a point where I wanted to refill the paragraph, so I pressed
    M-q. web-mode will mangle the following code badly.
#}
{% for diff in commit.diffs %}
<div class="source-view">
    <div class="source-header">
        <div class="meta"><a name="{{ loop.index }}">{{ diff.file }}</div>
    </div>

As it says, if I use M-q to fill the paragrah, I would expect only the comment's contents to be filled, but instead, everything up to the first blank line is filled, making M-q useless for comments.

Tested with current master, using Aquamacs 2.4 (a.k.a Emacs 23.3.50.1).

The following Twig snippet:

{{ set line_1 = 'foo' }}

does not highlight 1 as part of the variable line_1.

Tested against current master with Emacs 23.3.50.1.

I've tried to switch to webmode but syntax highlighting doesn't work

I've added twig.html extension to auto-mode-alist

(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 '("\\.twig\\.html\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.html\\.twig\\'" . web-mode))

I've Emacs Prelude installed.

--EDIT--

After some actions (removing TAG, marking etc..) I have partial syntax coloring

Please have a look at the screenshot below. This is the result of doing M-x indent-region on the entire buffer. Using Emacs 24.2 with Prelude. Problem persists even without Prelude.

Edit: I use https://gist.github.com/4532700 as my configuration.

ASP blocks are not recognized when the ASP marker is on a line by itself:
<%
do while not rs.eof
%>

ASP mode seems to have trouble with a number of vbscript constructs:

<%
set rs = Server.CreateObject("ADODB.Recordset")
rs.Open sql, conn, 3, 3

'on error resume next
rem on error resumt next

do while not rs.eof

%>

is colored very, very strangely. Comment recognition seems quite broken.

That's it

Comments don't handle quotes correctly.

You can reproduce this bug by putting the following code into a web-mode buffer.

// It's just a comment
return 'cool';

web-mode thinks "return" is a string because of the "'" in the comment.

This only appears to affect things if the quote is closed before the page ends, so:

// It's just a comment
return 1+1;

This actually highlights correctly until you put a "'" somewhere.

The replaced string has no color.

With the following snippet:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Test</title>
  </head>
  <body>
    <script type="text/javascript">
    alret("kick that bug !");
    </script>
  </body>
</html>

Replace "lre" with "ler"

If you have in an ERB file a construct like this:

<th><%= t('home.index.project_no') %> <%= link_to '', root_path(s: 'project_no', o: 'desc'), class: 'icon icon-arrow-down' %><%= link_to '', root_path(s: 'project_no', o: 'asc'), class: 'icon icon-arrow-up' %></th>

then the missing space after the %> leads to incorrect syntax highlighting. If you add the space, everything works as expected.

Emacs Version 24.3
Web Mode from git checkout

Earlier versions of web mode worked as expected. Off-by-one error?

consider this code

  function execute( $par ) {
    global $wgRequest;

    $this->setHeaders();
    $meth = $wgRequest->getMethod();
    switch ($meth) {
      case "GET":
            $this->methodGET();
      break;
      case "POST":
                             $this->methodPOST();
      break;
      default:
                                               $this->renderNothing();
    }

  }

This is how it's look when indentation is applied, my version is dc608af

{% set num_rows = top_level_categories|length // 3 %}

// and everything after it is (understandably) seen as a JavaScript comment.

I don't know web-mode's internals, so I don't know if that's actually feasible to fix, but I thought I should mention it.

Tested with current master, using Aquamacs 2.4 (a.k.a Emacs 23.3.50.1).

Hey, good work on the web-mode. Thanks!

I can't get the auto indentation works for html.

To reproduce: create a new file test.phtml and start typing hit enter - no indentation.

Is this a configuration issue? I've followed the instructions in EmacsWiki

Thanks

Pretty sure this is intentional, but it would be awesome if this was a configurable property :)

Laravel uses the Blade templating engine, which is in fact a pretty expressive templating engine in PHP. Can this be integrated into web-mode?

Specifically, I want :

1. Proper indentation of {{ }} and @ tags.
2. Treating content in {{ }} as PHP.
3. Support for Blade comments. i.e. code within {{-- --}}.
4. Support for Blade's control structures.

For details of the Blade templating engine, please see http://laravel.com/docs/views/templating#blade-template-engine.

The function web-mode-comment-uncomment uses plaint html comments:

<!-- and -->

instead of the special twig syntax:

{# and #}

This will not comment out twig variables and commands etc.
Example twig file:

<html>
<body>
<div class="main">
{% block content %}

{{ my_var }}

{% endblock %}
</div>
</body>
</html>

Using C-; on the that html would produce:

<!-- <html>
<body>
<div class="main">
{% block content %}

{{ my_var }}

{% endblock %}
</div>
</body>
</html> -->

instead of the expected:

{#<html>
<body>
<div class="main">
{% block content %}

{{ my_var }}

{% endblock %}
</div>
</body>
</html>#}

Edit.
Please disregard, I forgot to check if the web-mode was updated since yesterday. I pulled newer version of web-mode and it fixed the issue 👍

Hi.
Emacs hangs completely on tab indentation in a django html mode if a previous tag has a django template tag either {% %} or {{ }} inside of the html tag's attribute (style=" ", class=" " ... etc.) See picture for example.
Tested without anything else except web-mode added to emacs in versions 23.3.1 and 24.2.50.1 on Ubuntu 12.04 64bit (doubt that info is important)
Besides that bug it works amazing. The best emacs mode I've seen so far.
Thank you.

Hi,

I've got a problem to indent the velocity template code,the following is the sample.

issues:

• the matched tag is not in the same indentation level, see the div in the end of the sample
• the foreach and if clause should not be in the same level of indentation.

Thanks

#if($brandVOList && $brandVOList.size()>0)
#set($maxNumOfBrand=12)
<div class="layout layout-col">
  <div class="grid">
    <div class="mod-brand mod-normal">
      <div class="cell-header fd-clr">
        <h3 class="title">brand</h3>
      </div>
      <div class="cell-content">
        <ul class="list-tag fd-clr">
          #foreach($brandVO in $brandVOList)
          #if($velocityCount<=$maxNumOfBrand)
          <li>
            <div class="vertical-img" >
              <a href="$!brandVO.url" title="$!brandVO.name" class="box-img">
                <img src="$!brandVO.logo" alt="$!brandVO.name"/>
              </a>
          </li>
          #end
          #end
        </ul>
            </div>
      </div>
    </div>
  </div>
#end

pretty simple/easy to reproduce -- i'm surprised hasn't been seen/reported before?
maybe it's something in my .emacs/environ that is botching instead and not web-mode?

https://gist.github.com/anonymous/4997952

The cause is (setq bfn (file-name-nondirectory (buffer-file-name))) on line 355

I've been using web-mode for about a month now and I must say I'm quite impressed. The only thing that I miss from html-mode and multi-web-mode is the imenu index. Would you consider adding support for it?

I get this error "web-mode-scan-region: Invalid function: web-mode-with-silent-modifications" whenever I try to edit one of the smarty templates in a project of mine.

Running web-mode on emacs 24.3.50.1

There are a lot of client side templates in the wild now, some of them use script tags as template sources, so it would be nice to be able to highlight html within "script" tag with specific type attribute.

I am probably can implement this myself if you can give me some insights on how it should be done.

Using web-mode from the official download link (https://raw.github.com/fxbois/web-mode/master/web-mode.el) or by installing it from MELPA, the indentation of Javascript code is incorrect. This is how web-mode indents the following file:

<html>
  <body>
    <script type="text/javascript">
    var obj = {
      "a": 1,
              "b": 2,
                      "c": 3
    };

    var arr = [
1,
   2,
      3
         ];
    </script>
  </body>
</html>

• Emacs version: 24.3.50.1 (emacs-snapshot package on Ubuntu 12.10 from the https://launchpad.net/~cassou/+archive/emacs PPA
• Fails with both my normal configuration and a clean config (emacs -q)

I can't get syntax highlighting working with the solarized theme. I tried https://github.com/bbatsov/solarized-emacs and https://github.com/sellout/emacs-color-theme-solarized. I tried from marmalade and from source.

This is a blocker for me - I can't use a major mode that doesn't work with my favourite theme.

Nxhtml has a handy feature, it can use different background colors for the different kinds of embedded code chunks, so for example, if you have a HTML file with Javascript and PHP blocks embedded in it, then the HTML code, the Javascript code and the PHP code will have different backgound colors. It is very useful, because it makes it easy to see with a glance where a PHP chunks begins and ends in a HTML file, etc.

The same feature would also be useful in web-mode. Here's a screen shot from the NXHTML page which shows this:

http://ourcomments.org/Emacs/nXhtml/doc/nxhtml.html#php

Says:
Face for blocwhitespaces

should say something about server block background.

Server background faces don't seem to be working for me in the latest git version.

I use rainbow-mode a lot to play with colors in HTML snippets, it would be great if web-mode played well with it.

Thanks!

When I do "web-mode-buffer-indent"

some of comments like:

        /**
         * Outputs the entire contents of the (X)HTML page
         */

become:

    /**
* Outputs the entire contents of the (X)HTML page
*/

Is it possible to correctly indent multiline comments?

Hello,

I used php-mode for a long. Web-mode could really help me but I'm a bit ennoyed with the following indentation bug. I use the following lines in my emacs init.el :

(require 'php-mode)
(require 'web-mode)

(defun milouse-style ()
  "Customization for c-style programming"
  (interactive)
  (set 'tab-width 4)
  (setq c-basic-offset 4)
  (setq indent-tabs-mode nil)
  (c-set-offset 'case-label '+)
  (c-set-offset 'arglist-intro '+)
  (c-set-offset 'arglist-cont-nonempty 'c-lineup-math)
  (c-set-offset 'arglist-close 'c-lineup-close-paren)
  (c-set-offset 'substatement-open '0)
  (c-set-offset 'brace-list-open '0)
  (c-set-offset 'statement-case-open '0)
  (local-set-key (kbd "RET") 'newline-and-indent))

(add-hook 'c-mode-hook 'milouse-style)
(add-hook 'c++-mode-hook 'milouse-style)
(add-hook 'php-mode 'milouse-style)
(add-hook 'js-mode 'milouse-style)
(add-hook 'web-mode-hook 'milouse-style)

(defun milouse-webmode-style ()
  "Customization for web-mode"
  (interactive)
  (setq web-mode-css-indent-offset 4)
  (setq web-mode-code-indent-offset 4))
(add-hook 'web-mode-hook 'milouse-webmode-style)

(add-to-list 'auto-mode-alist '(".php$" . web-mode))
(add-to-list 'auto-mode-alist '(".inc$" . web-mode))
(add-to-list 'auto-mode-alist '(".tpl$" . web-mode))
(add-to-list 'auto-mode-alist '(".html$" . web-mode))

I use it to format my code as follow (in php, javascript, etc.) :

function strtoascii($string){
    $string = htmlentities($string, ENT_NOQUOTES, 'UTF-8');
    $string = preg_replace(
        '#&(\w{1,2})(?:acute|cedil|circ|grave|lig|ring|slash|tilde|uml);#',
        '$1',
        $string
    );
    $string = preg_replace('#(&\w+;)#', '', $string);
    return $string;
}

It works perfectly in php-mode or js-mode, but in web-mode it produced this kind of things... any idea why ?

function strtoascii($string){
    $string = htmlentities($string, ENT_NOQUOTES, 'UTF-8');
    $string = preg_replace(
    '#&(\w{1,2})(?:acute|cedil|circ|grave|lig|ring|slash|tilde|uml);#',
                           '$1',
                           $string
);
    $string = preg_replace('#(&\w+;)#', '', $string);
    return $string;
}

1. Can I change the default behavior of after typing </ then let the cursor goes into the middle of <sth>I</sth>?
2. Can I change the trigger </ ? Like after typing <sth> then triggers completion.

Thanks.

update:

I apologize for my broken English.

1. I mean the cursor can gets in between the open and closed tag: <sth>[Cursor here]</sth>, not <sth></sth>[NOT here]
2. I mean I want to custom the trigger: I type <html>, after typing the > then triggers completion, without typing two more chars </.

Personally, I prefer these two customisations.

I see in the changes log that apparently php closing tags ( ?> ) are not required in php files. However, if I have a phtml file with html and php, the closing php tag is required for font locking and such. Perhaps this is intended, but seems to be a bug to me.

I tried web mode with this minimal PHP file which omits the closing ?> tag and the code is not highlighted:

<?

if (true)
  $a = "test";

Omitting the closing tag at the end of the file is good practice, so web mode should support it:

The closing tag of a PHP block at the end of a file is optional, and in some cases omitting it is helpful when using include or require, so unwanted whitespace will not occur at the end of files, and you will still be able to add headers to the response later. It is also handy if you use output buffering, and would not like to see added unwanted whitespace at the end of the parts generated by the included files.

http://php.net/basic-syntax.instruction-separation

As mentioned in issue #30, it would be nice to have C-; use the templating engine's comment syntax, so that commented code is completely invisible to the end user. It keeps extraneous bytes out of the response, and makes it easy to mask incorrect/unfinished templating code.

I know issue #30 was closed since template extensions are not a reliable way of recognizing template type.

What about offering a variable users can set to indicate their expected template syntax?

If they work with different kinds of templates regularly, they could use .dir-locals to set the variable per-directory, which should give enough flexibility for almost any use.

Does that seem feasible?