How to syntax-highlight HTML inside JavaScript strings in Sublime

Question

Is there any Sublime package to syntax-highlight HTML inside JavaScript strings?

(Note the question is only about HTML inside JS strings, not syntax highlighting in general.)

Specifically I am writing Angular components using inline templates

angular.module('compMod', []).component('myComp', {
    template: `<div>Some Text</div>`
});

and looking to highlight HTML syntax inside the ES6 template strings.

Answer 1

As @Calvin commented above, I wouldn't say this is a good practice, yet I wouldn't necessarily say it's entirely bad one. Anyways, here's my naive solution (haven't tested it for any edge cases):

Install babel package for sublime text and choose it as the default syntax for your your *.js files.

Next, edit JavaScript (Babel).sublime-syntax, which is located inside the Babel package directory, e.g. ~/.config/sublime-text-3/Packages/Babel/.

Search for the section template-string-body:, and add at its beginning the following two lines, similar to @VRPF's suggestion:

- meta_content_scope: text.html.basic.embedded.js
- include: scope:text.html.basic

Now you have a full support in es6 + HTML syntax within template-strings.