Highlight HTML in ES6 template strings with Sublime

This is Kusakabe from the development team.

Starting with ES6, template strings (template literals) can be used as standard.
This is useful when using AngularJS or Vue.js, as you do not need to escape single or double quotes when writing HTML tags in a string.

Like this, the highlights made by the editor may be plain.

In this article, we will introduce the steps to highlight HTML tags in template strings as HTML tags in Sublime Text.

However, Michael Russell has released a syntax file on Gist, so let's use it.

---

Immediately open Sublime Text,

Tools -> Developer -> New Syntax...

Go ahead and rewrite the contents of the opened window this contents and save it.
The file name is arbitrary, but the extension should be sublime-syntax. Adding Syntax is now complete.

Then open the file that uses the template string and

　View -> Syntax -> Javascript NG

If so, it should be highlighted like the featured image in this article!

In addition, with some js file open,

　View -> Syntax -> Open all with current extension as... -> Javascript NG

If you do this, Javascript NG will be automatically selected when you open a file with the .js extension.

(Although the Syntax name has "NG", it can be used without problems when writing not only Angular but also Vue.)