HTML 语法高亮 sublime 3 Typescript

Question

我正在使用带有 Sublime 3 的 TypeScript。如何在模板属性中添加 HTML 突出显示：[注意：我已经在使用 Microsoft TypeScript 包]

看看它现在如何没有突出显示：

Answer 1

这是一个快速修复，它仍然使用您安装的 TypeScript 包及其现有的语法高亮定义：

1. 打开一个 TypeScript 文件（使用您安装的 TypeScript 语法高亮显示）

2. 选择Tools > Developer > New Syntax from Typescript.tmLanguage 以创建一个新的语法定义文件基于现有的

3. 找到template 上下文（ctrl+f 表示string.template.ts）并将'scope:text.html.basic' 的包含添加到push 中，如 评论行如下：

   %YAML 1.2
   ---
   # http://www.sublimetext.com/docs/3/syntax.html
   name: TypeScript + HTML  # <-- renaming is optional
   
     # ...
   
     template:
       - match: "([_$[:alpha:]][_$[:alnum:]]*)?(`)"
         captures:
           1: entity.name.function.tagged-template.ts
           2: punctuation.definition.string.template.begin.ts
         push:
           - meta_scope: string.template.ts
           - match: "`"
             captures:
               0: punctuation.definition.string.template.end.ts
             pop: true
           - include: template-substitution-element
           - include: string-character-escape
           - include: 'scope:text.html.basic'  # <-- !! only add this line !!
     template-substitution-element:
   
     # ...
   

   可选步骤：
   将文件开头的name 属性更改为TypeScript + HTML 之类的内容，以便稍后在语法列表中轻松找到并选择它

4. 以.sublime-syntax文件结尾保存文件

5. 重新启动 Sublime Text 并将新语法高亮应用到打字稿文件：

Answer 2

你可以在这里阅读如何实现这一点：

https://forum.sublimetext.com/t/javascript-es6-template-literals-syntax-for-html/18242

转载于此：

打开工具 > 开发人员 > 新语法

添加：

%YAML1.2
---
# See http://www.sublimetext.com/docs/3/syntax.html
name: JavaScript NG
file_extensions:
  - js
  - ng.js
scope: source.js.ng
contexts:
  main:
    - match: ""
      push: scope:source.js
      with_prototype:
      - match: '`'
        push:
          - meta_content_scope: text.html.basic.embedded.js
          - include: 'scope:text.html.basic'
          - match: '`'
          pop: true

并保存它有 JavaScript-NG.sublime-syntax

关于这个还有一个开放的 github 问题：

https://github.com/sublimehq/Packages/issues/179