HTML syntax highlight sublime 3 Typescript

问题

I am using TypeScript with Sublime 3. How can I add HTML highlight in template attribute: [NOTE: I am already using Microsoft TypeScript Package]

Look how its not highlighted now:

回答1:

You can read here how to achieve this:

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

Reproduced here:

Open Tools > Developer > New Syntax

Add:

%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

and save it has JavaScript-NG.sublime-syntax

There is also an open github issue on this:

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

回答2:

Here's a quick fix that still makes use of your installed TypeScript package and its existing syntax highlight definition:

1. Open a TypeScript file (with your installed TypeScript syntax highlighting)

2. Select Tools > Developer > New Syntax from Typescript.tmLanguage to create a new syntax definition file based on the existing one

3. Find the template context (ctrl+f for string.template.ts) and add an include for 'scope:text.html.basic' to the push as indicated in the commented line below:

   %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:
   
     # ...
   

   optional step:
   Change the name property at the beginning of the file to something like TypeScript + HTML to easily find and select it in the Syntax list later

4. Save the file with a .sublime-syntax file-ending

5. Restart Sublime Text and apply your new syntax highlighting to a typescript file:

来源：https://stackoverflow.com/questions/38160260/html-syntax-highlight-sublime-3-typescript