如何在 Sublime 中对 JavaScript 字符串内的 HTML 进行语法高亮

Question

是否有任何 Sublime 包可以在 JavaScript 字符串中语法高亮 HTML？

（请注意，问题仅涉及 JS 字符串中的 HTML，而不是一般的语法突出显示。）

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

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

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

Answer 1

正如 @Calvin 上面评论的那样，我不会说这是一种好的做法，但我也不一定会说这是完全糟糕的做法。无论如何，这是我的天真的解决方案（尚未测试任何边缘情况）：

安装 sublime text 的 babel 包并选择它作为 *.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 语法。

Answer 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

Answer 3

随着 Sublime 最近的更新，由于“with_prototype 操作中的明显递归：达到 25000 上下文理智限制”，上述内容不再有效。

我已经想出了一个可以做同样事情的更新 - 至少据我所知，它看起来像这样：

%YAML 1.2
---
name: JavaScript HTML
file_extensions:
  - js
scope: source.js
version: 2
extends: Packages/JavaScript/JavaScript.sublime-syntax
contexts:
  literal-string-template-begin:
    - match: '`'
      embed: scope:text.html.basic
      embed_scope: text.html.basic
      escape: '`'
      pop: true

希望这对某人有帮助。