如何在Sublime中语法突出显示JavaScript字符串中的HTML

How to syntax-highlight HTML inside JavaScript strings in Sublime

本文关键字：JavaScript 显示 字符串 HTML Sublime 语法      更新时间：2023-09-26

是否有任何Sublime包可以在JavaScript字符串中语法突出显示HTML？

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

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

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

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

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

为sublime文本安装babel包，并选择它作为*.js文件的默认语法。

接下来，编辑位于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语法。

我只需要创建一个新的语法高亮器，因为你不必担心他们是否更新了正常的包。

转到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

相关文章：