Special color-markup for angular-templates in sublime text?

Question

I'm looking for a syntax-markup for angularJS. Stuff like:

• Special coloring of double curlybraces {{mytag}}
• Special coloring of any attribute starting with ng-...

I already tried this package. It has html(angular) syntax, but it doesn't seem to do anything.

Answer 1

I've tweaked HTML.tmlanguage file bit to do something like that.

you can download the file from my SublimeText2-Userfiles repo on GitHub

Here is how to use it:

• Copy the file to your user folder and then while you've an angular.js template file open, click on the Syntax option in bottom right corner of sublime text status bar. select User>HTML (Angular.js)

• You should also update you color scheme to add color highlighting for angular specific scopes. you can checkout my personal color-scheme on the same repo here. I think all you need is something like this.

          <dict>
                  <key>name</key>
                  <string>Angular</string>
                  <key>scope</key>
                  <string>entity.other.attribute-name.angular.html, source.angular.embedded.html</string>
                  <key>settings</key>
                  <dict>
                          <key>foreground</key>
                          <string>#FF3A83</string>
                  </dict>
          </dict>
  

Remember it's just a dirty hack to make my personal workflow easier. I would appreciate if you contribute and make it better. It needs a lot of improvements but it's almost all that you wanted.