Question

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

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

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

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

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

Answer 1

正如@Calvin上面评论的那样，我不会说这是一个很好的做法，但我不一定会说这是一个很糟糕的做法。无论如何，这是我天真的解决方案（没有针对任何边缘情况进行测试）：

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

接下来，编辑位于Babel包目录内的JavaScript (Babel).sublime-syntax，例如~/.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

如何在Sublime中的JavaScript字符串中语法高亮显示HTML

2 个答案: