HTML syntax highlight sublime 3 typescript

Question

I am using TypeScript with Sublime 3. How to add an HTML shortcut to a template attribute: [NOTE: I am already using Microsoft TypeScript Package]

See how it is now not highlighted:

Answer 1

Here you can read how to do it:

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

Reproduced here:

Go to 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 a problem with open github:

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

Answer 2

Here is a quick fix that still uses your installed TypeScript package and its syntax definition:

• Open a TypeScript file (with TypeScript syntax highlighted)

• Choose Tools> Developer> New Syntax from Typescript.tmLanguage to create a new syntax definition file based on an existing

• Find the template context ( ctrl + f for string.template.ts ) and add include for 'scope:text.html.basic' to push , as indicated in the comments 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: # ... 

  additional 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

• Save the file with .sublime-syntax file completion

• Restart Sublime Text and apply the new syntax highlighting to the TypeScript file: