highlight HTML inside JavaScript strings in Sublime

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.


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, eg ~/.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.

链接地址: http://www.djcxy.com/p/90994.html

上一篇: 在C ++中违反类型安全与其他类型的函数声明?

下一篇: 突出显示Sublime中JavaScript字符串中的HTML