Highlight HTML & CSS inside js file when within template string



I am looking for a package that highlights html & css in js files when within a template string.

Developing web components in a class based way this would be extremely handy. Sadly I did not find anything like this. Is there a packge / a way to solve this isue? Thanks.


What framework are you using?


None, I am building vanilla web components. But wouldn’t it be the same? A template string is a template string, correct?

this.createShadowRoot().innerHTML = `
          color: blue;     
     <div class="web-component">
          // more html

If I put this in a .js file I would like it to be somewhat correctly highlighted.


So this does exist in language-javascript, but for some reason the pattern doesn’t match equals signs and expects whitespace before it, so it works for

html`<a href="">`

but not innerHTML =.

I’ve forked the language-javascript repo, added a pattern to match for your case, and submitted a pull request to the core package’s repo. If it’s accepted, the functionality will be generally available. In the mean time, you can download my repo and use the command apm link from within that directory to create a symbolic link in your .atom/packages directory that will load my version instead of the core version. If the core is updated to include this functionality, you can then delete the symbolic link.


Awesome, thank you very much, I will watch the PR you created. It seems there are some more edits needed on your side. Thanks a lot for taking this on.


Nothing big, I’m just terrible at writing tests. :slight_smile:


Hmmm, it has been merged, but somehow it still does not work for me. :disappointed: Am I doing something wrong?


It’s working for me.


Ahh, okay, the problem is, that it only works if you assign it to innerHTML. If you give a template string into a function or a variable for e.g. it does not work.


Your initial request was for a template as an innerHTML assignment to be highlighted as HTML, and that’s what was implemented.

The template literal syntax is used for a variety of parser functions, and Atom has no way of knowing that a template literal without a tag is going to eventually be used for HTML.


Ahhh, thank you very much for the explanation.


anyone seeing this and still need answer language-babel solved this issue for me


In case anyone else need this, there’s a general solution working not only with innerHtml and also working for CSS. https://atom.io/packages/language-javascript-plus