Sublimetext 3 & AngularJS - Syntax highlighting (HTML)

Question

Is there some syntax highlighter for angularjs html templates ?

Example

ng-click="someVariable"

I want someVariable to be highlighted differently from other strings that are between "", or at least I want ng-someDirective to be highlighted.

Answer 1

For sublime 3 you must edit the HTML.sublime-syntax file:

Find the line 197 "tag-id-attribute" and before that paste

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

Make sure you have no tabs.

Then go to the bottom of the file and after "- include: tag-id-attribute" paste:

- include: tag-ng-attribute

Answer 2

I strongly recommend you to use this package:

https://github.com/angular-ui/AngularJS-sublime-package

It gives to you autocomplete and other stuff.

About the syntax highlighting, I have mine as this:

Regarding the syntax highlighting, you must change the html syntax parser.

You have to navigate to Packages folder inside your installation folder (mine was /opt/sublime_text/Packages).

Then you open the Color Scheme - Default.sublime-package (using any ZIP explorer), and you edit the Monokai.tmTheme (or the theme you are using).

You must find the tag containing <string>Tag attribute</string> and add this section section after the dict:

<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>bold</string>
    <key>foreground</key>
    <string>#FF6600</string>
  </dict>
</dict>

You save the file, and re-add to your "ZIP" which is a sublime-package folder.

STEP 2:

Do the same, but for your HTML.tmLanguage, inside the HTML.sublime-package.

There, you need to find for:

    <key>tag-generic-attribute</key>
<dict>
    ...
</dict>

and add section after:

<key>tag-ng-attribute</key>
<dict>
    <key>match</key>
    <string>\b(ng-[a-zA-Z\-:]+)</string>
    <key>name</key>
    <string>entity.other.attribute-name.ng.html</string>
</dict>

Again, save, insert it into your sublime-package, and voilá, delete the sublime application cache, restart it, and you have the syntax highlight.

Please let me know the result. I got this explanation in this link: https://groups.google.com/forum/#!topic/angular/qCGSZ6a6KVA

Hope it helps