Proper Syntax Highlighting for Angular2 HTML in Sublime Text 3

st3-ng2-html-highlighting.md

Note:

The latest version of this gist now lives in its own repository: https://github.com/zvuc/HTML-ng2.sublime-package Download the package file from the repo.

Fix ng2 attributes not being highlighted like other HTML attributes correctly

ADD: You can also install PackageResourceViewer from Package Control to open up and modify the package contents directly without having to manually rename, unpackage and copy.

1. Find Sublime Text 3.app in Applications, View Package Contents
2. Open Contents/MacOS/Packages/HTML.sublime-package (Rename to .zip, unpackage it)
3. In HTML.sublime-syntax file, add following under tag-event-attribute:

tag-ng2-attribute:
  - match: '\s+(([\[\(][a-zA-Z0-9.:-]+[\]\)]|(\[\()[a-zA-Z0-9.:-]+(\)\])|[\*#][a-zA-Z0-9.:-]+)\s*(=)\s*)'
    captures:
      1: meta.attribute-with-value.html
      2: entity.other.attribute-name.ng2.html
      3: punctuation.separator.key-value.html
    push:
      - match: '"'
        scope: punctuation.definition.string.begin.html
        set:
          - meta_scope: meta.attribute-with-value.html string.quoted.double.html
          - match: '"'
            scope: punctuation.definition.string.end.html
            pop: true
          - include: entities
      - match: "'"
        scope: punctuation.definition.string.begin.html
        set:
          - meta_scope: meta.attribute-with-value.html string.quoted.single.html
          - match: "'"
            scope: punctuation.definition.string.end.html
            pop: true
          - include: entities
      - match: '(?:[^\s<>/''"]|/(?!>))+'
        scope: meta.attribute-with-value.html string.unquoted.html
      - match: ''
        pop: true
  - match: '\s+([\[\(][a-zA-Z0-9.:-]+[\]\)]|(\[\()[a-zA-Z0-9.:-]+(\)\])|[\*#][a-zA-Z0-9.:-]+)'
    captures:
      1: entity.other.attribute-name.ng2.html

This is basically a copy of existing tag-generic-attribute: with modified regexp for match: to target Angular 2 attributes starting with * or #, enclosed in [] or () or [()].

4. At the bottom under tag-stuff: add:

- include: tag-ng2-attribute

5. Save the modified package as .sublime-package and replace the original file. You can also rename files to something else if you want to keep the original HTML.sublime-package and have a separate package like HTML-ng2.sublime-package.

To add custom color to your Color Scheme

1. Open up the package for the Color Scheme you're using, find the *.tmTheme file.
2. Add following code inside <array>:

<dict>
	<key>name</key>
	<string>Tag ng2 attribute</string>
	<key>scope</key>
	<string>entity.other.attribute-name.ng2</string>
	<key>settings</key>
	<dict>
		<key>fontStyle</key>
		<string></string>
		<key>foreground</key>
		<string>#C99E00</string>
	</dict>
</dict>

Replace the color HEX code inside the last <string> to one of the theme colors in your color scheme. 3. Save and replace existing file.

Result

Great stuff! What would a syntax matcher look like for angular1's ng-* directives?

I've tried the following matcher without success.

tag-ng-attribute:
    - match: \b(ng-[a-zA-Z\-:]+)
      captures:
        1: entity.other.attribute-name.ng.html
        2: punctuation.separator.key-value.html
...
tag-stuff:
    - include: tag-ng-attribute
...

There is no tabs in the HTML.sublime-syntax file.

Here is the theme part (inside the <array></array>).

<dict>
  <key>name</key>
  <string>Tag ng attribute</string>
  <key>scope</key>
  <string>entity.other.attribute-name.ng</string>
  <key>settings</key>
  <dict>
    <key>fontStyle</key>
    <string />
    <key>foreground</key>
    <string>#F99157</string>
  </dict>
</dict>

Sublime has been restarted multiple times and the cache has been cleared.

Could you please provide som input on what I'm doing wrong? Maybe you can try it on your side?

Great! Thanks a lot!

@ericnilsson-infrasight:

Try the following for HTML.sublime-package:

  tag-ng-attribute:
    - match: '\s+((ng-[a-zA-Z\-:]+)(=)\s*)'
      captures:
        1: meta.attribute-with-value.html
        2: entity.other.attribute-name.ng.html
        3: punctuation.separator.key-value.html

And then for the include order, I found that tag-ng-attribute must come before tag-generic-attribute to be properly colored by the theme. So it will be:

  tag-stuff:
    - include: tag-id-attribute
    - include: tag-class-attribute
    - include: tag-style-attribute
    - include: tag-event-attribute
    - include: tag-ng-attribute
    - include: tag-ng2-attribute
    - include: tag-generic-attribute

(I renamed Angular2 attributes to ng2 to distinguish from Angular 1.)

It didn't work for me, when I follow the instructions the package turns into a folder

Super useful -- thank you! :D

http://blog.netgloo.com/2017/03/09/setup-sublime-text-3-for-angular/