feat: Syntax Highlighting for HTML Template Strings

[sparty02]

Given HTML content in an ES6 template string, e.g.:

let template = `
    <div class="row">
        <div class="col-md-4">
            <p>Hello there!</p>
        </div>
    </div>
`

....syntax highlight the HTML as if it was stand-alone in a .html file.

[sparty02]

Interestingly, by accident, I found out that it syntax highlights correctly with a single quote ', but not with the template literal backtick ```.

i.e., the following syntax highlights as it would if this markup was in a standalone .html file.

template: '
    <input class="form-control" value="name"">
'

[zertosh]

There is also no way to know that the contents of a template string is html. I made a custom version of the syntax that matched css in a template string when called with __CSS:

const foo = __CSS(`/*css string*/`);

but sublime kept crashing, so I stopped using it.

Interestingly, by accident, I found out that it syntax highlights correctly with a single quote

what you're seeing is plain ol' JSX matching. single quotes are only matched for one line. so the first line is a string start, the 2nd is JSX, and the 3rd is another string start.

[sparty02]

There is also no way to know that the contents of a template string is html.

Agreed. However, thinking out loud (with the caveat that I am naive on the internals of babel-sublime), would it make sense to "evaluate" the contents of a template literal, maybe running it through the JSX matching, and highlighting it as such if the JSX matcher didn't choke on it?

[zertosh]

Since you can interpolate expressions in template strings, it wouldn't make sense to try to detect the contents as any particular type of source. Besides, you're opening a can of worms when you start matching some strings but not others. Check the issues, people get really emotional about their colors :stuck_out_tongue:

[sparty02]

Check the issues, people get really emotional about their colors

That's why I'm coming up with crazy ideas... :smile: anyway, thanks for humoring me... :wink:

[zertosh]

It's not crazy hehe - I tried it myself with css. If it didn't crash ST3, I would've published instructions on how to make your own version that matched whatever function call with a template string as css/html.

[OliverJAsh]

This seems to work when using https://github.com/Benvie/JavaScriptNext.tmLanguage?

[thedamon]

@OliverJAsh that's strange.. I came to this package after I wasn't getting that behaviour with JavaScriptNext.tmLanguage

[felipearosemena]

I know this is closed, but would like to +1 this request.

Wouldn't it be possible to parse the content between backticks as html and then the expressions inside ${} as js?

It seems to me that would make sense, after all aren't template literals supposed to make easier to work with HTML within JS? Proper syntax highlighting would be a huge bonus for this.

[DylanPiercey]

Currently the atom babel syntax plugin allows for this but only if the tagged template function is called html - like so:

const it = html`
  <div>hi</div>
`

Also note that GitHub does the same.

[tamer1an]

56.0.2924.87 (64-bit)