HTML syntax highlight sublime 3 Typescript

Question

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:

fspinnenhirn · Accepted Answer · 2017-05-06 00:27:57Z

8

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

Open a TypeScript file (with your installed TypeScript syntax highlighting)
Select Tools > Developer > New Syntax from Typescript.tmLanguage to create a new syntax definition file based on the existing one

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

Save the file with a .sublime-syntax file-ending
Restart Sublime Text and apply your new syntax highlighting to a typescript file:

answered May 6, 2017 at 0:27

fspinnenhirn

1,9091 gold badge14 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Luckylooke Over a year ago

View > Syntax > Open all with current extension as > TypeScript + HTML :)

Boomer Rogers Over a year ago

Any suggestions on getting this working with the inline css styles angular has as well?

VRPF · Accepted Answer · 2016-07-02 16:57:29Z

3

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

edited Jul 2, 2016 at 16:57

answered Jul 2, 2016 at 16:51

VRPF

3,1281 gold badge16 silver badges16 bronze badges

3 Comments

SinkingTitanic Over a year ago

I came across this article before posting the question. it did not do any highlighting. When it finishes loading the syntax everything is the same. I tried relaunching sublime but nothing happened.

SinkingTitanic Over a year ago

I got it working after choosing 'Javascript NG' from view -> syntax -> 'Javascript NG'

angry kiwi Over a year ago

I created a file name JavaScript-NG.sublime-syntax, pasted the content provided in this answer, saved it to packages>user. the restart sublime. But I couldn't activate the syntax in sublime.

Collectives™ on Stack Overflow

HTML syntax highlight sublime 3 Typescript

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related