I often work with Angular and Typescript, and I'm fond of putting my Angular templates directly into my Typescript files. The resulting code is essentially Javascript with HTML snippets in it, like this:

showModal() {
  return modalService.open({
    template: `
    <h1 class="some-class"
        ng-click="some-method">A heading</h1>
    controller: ...

I would love if web-mode could detect the HTML section and apply HTML syntax highlighting and indentation rules. But unfortunately, web-mode seems to treat everything inside the backticks as a simple string, so it doesn't work.

Back when I used to work with Coffeescript this sort of thing worked fine, but Coffeescript used a different delimiter for multiline strings (triple double-quotes I think).

Is there some way to configure web-mode to do the right thing here?

1 Answer 1


The version 14.1.16 of web-mode available on github provides this feature : https://github.com/fxbois/web-mode

  • You could make your answer more usefull by naming the version (it won't be the last some day) as well as providing a link.
    – JeanPierre
    Apr 30, 2017 at 9:40
  • 2
    Thanks @fxbois! I just tried out version 14.1.18 from github. It doesn't seem to be working perfectly: the indentation is slightly improved (?) but there is no syntax highlighting--the whole HTML snippet is just colored like a string. Tag auto-closing doesn't work either. Am I missing something?
    – tom
    May 1, 2017 at 22:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.