如何在 Sublime 中的 JavaScript 字符串中语法高亮 HTML答案

【问题标题】：How to syntax-highlight HTML inside JavaScript strings in Sublime如何在 Sublime 中的 JavaScript 字符串中语法高亮 HTML
【发布时间】：2016-07-13 19:37:12
【问题描述】：

是否有任何 Sublime 包来语法高亮 JavaScript 字符串中的 HTML？

（注意这个问题只是关于 JS 字符串中的 HTML，而不是一般的语法高亮。）

具体来说，我正在使用内联模板编写 Angular 组件

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

并希望在 ES6 模板字符串中突出显示 HTML 语法。

【问题讨论】：

不知道有没有这样的包，反正我觉得也不是什么好主意。当模板字符串不是 HTML 时，您可能希望正确突出显示模板字符串中的内容。但是，您可以使用 templateUrl 并链接到模板文件，而不是使用模板字符串。
@Calvin 内联模板的一个优点是将所有内容都放在一个地方，它经常被使用，例如here，但据我所知，该软件包的作者使用的 Webstorm 正是这样做的。
在 Github 上的 sublimehq 的 Packages 仓库中打开一个 issue 并使用 [JavaScript] 标签发出请求。在最新版本的JavaScript.sublime-syntax 中，反引号中的模板字符串被标记为这样，因此在那里导入HTML 语法应该不会太难。他们可能同意也可能不同意，但值得一试。
我在这里回答了同样的问题：stackoverflow.com/questions/38160260/…

标签： javascript html angularjs sublimetext3 syntax-highlighting

【解决方案1】：

正如@Calvin 上面评论的那样，我不会说这是一个好的做法，但我不一定会说这是完全坏的做法。无论如何，这是我的幼稚解决方案（尚未针对任何边缘情况对其进行测试）：

安装 babel package for sublime text 并选择它作为您的 *.js 文件的 default 语法。

接下来，编辑JavaScript (Babel).sublime-syntax，它位于 Babel 包目录中，例如~/.config/sublime-text-3/Packages/Babel/.

搜索template-string-body:部分，并在其开头添加以下两行，类似于@VRPF的建议：

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

现在您在模板字符串中完全支持 es6 + HTML 语法。

【讨论】：

这成功了！如果你想用默认的JavaScript语法来实现，可以使用Package Resource Viewer -> Open Resource -> JavaScript -> JavaScript.sublime-syntax，修改literal-string-template：将meta_scope设置为text.html.basic.embedded.js和@987654330 @ 到 scope:text.html.basic.

【解决方案2】：

我会创建一个新的语法荧光笔，因为您不必担心它们是否会更新普通包。

转到Tools > Developer > New Syntax...

%YAML 1.2
---
# See http://www.sublimetext.com/docs/3/syntax.html
name: Javascript HTML
file_extensions:
  - element.js
  - tag.js
  - jsx
  - js
scope: source.js.tag
contexts:
  main:
    - match: ""
      push: Packages/JavaScript/JavaScript.sublime-syntax
      with_prototype:
      - match: '([a-zA-Z$_][\w$_]*)?(`)'
        push:
          - meta_content_scope: text.html.basic.embedded.js
          - include: 'scope:text.html.basic'
          - match: '`'
            pop: true
          - match: '\$\{'
            captures:
              0: punctuation.definition.template-expression.begin.js
            push:
              - meta_scope: meta.template.expression.js
              - include: 'scope:source.js'
              #- meta_content_scope: source.js.embedded.expression
              - match: '\}'
                scope: punctuation.definition.template-expression.end.js
                pop: true

然后另存为JavascriptHTML.sublime-syntax

Restart Sublime然后你可以去View > Syntax > Open all with this ext as > Javascript HTML

【讨论】：