Sublime Forum

How to extend an already existing tmLanguge

#1

I’m trying to extend HTML.tmLanguage and add some new scopes for a javascript framework. I followed the docs here (docs.sublimetext.info/en/latest/ … xdefs.html) and made the following simple file:

[code]<?xml version="1.0" encoding="UTF-8"?>

fileTypes html name HTML (Angular.js) patterns comment double curly braces match \{\{^\}\}]+\}\} name text.html.angular.expression scopeName text.html uuid de8141c6-c6a3-4452-8a75-eb0f527dc043 [/code]

The problem is that unlike other tmLanguage files that extend HTML like HTML (Rails).tmLanguage, when I choose the HTML (Angular.js) file syntax form the status bar, I loose all the default HTML syntax highlighting.
What am I missing here? how one can extend HTML or any other syntax without loosing the default patterns and rules?

0 Likes

#2

I answered a similar question in this thread. In short, you have to include the HTML syntax.

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
    <plist version="1.0">
    <dict>
       <key>fileTypes</key>
       <array>
          <string>html</string>
       </array>
       <key>name</key>
       <string>HTML (Angular.js)</string>
       <key>patterns</key>
       <array>
          <dict>
             <key>comment</key>
             <string>double curly braces</string>
             <key>match</key>
             <string>\{\{^\}\}]+\}\}</string>
             <key>name</key>
             <string>text.html.angular.expression</string>
          </dict>

          <dict>
             <key>include</key>
             <string>text.html.basic</string>
          </dict>

       </array>
       <key>scopeName</key>
       <string>text.html</string>
       <key>uuid</key>
       <string>de8141c6-c6a3-4452-8a75-eb0f527dc043</string>
    </dict>
    </plist>
0 Likes

#3

Thanks man, I don’t know why I’ve not been able to find that thread. maybe I should blame the forum search capabilities :smile:

0 Likes

#4

Now I run into another problem,
When I do not include text.html.basic, I don’t get the default scope and no syntax highlighting but when I check the scope of text elements, that I’ve defined in the language file, I’ll get the correct scope.
But, when I include text.html.basic, It’ll override all my defined scopes and I don’t see them in the status bar when inspecting the scope with control+shift+p

{ "name": "HTML (Angular.js)", "scopeName": "text.html.angular", "fileTypes": "html", "ng.html"], "patterns": { "include": "text.html.basic"}, { "match": "\\{\\{^\\}\\}]+\\}\\}", "name": "angular.expression", "comment": "double curly braces" }, { "match": "((x-)?(data-)?ng-_:]\\w+)", "name": "angular.directive", "comment": "angular directives" } ], "uuid": "de8141c6-c6a3-4452-8a75-eb0f527dc043" }

0 Likes

#5

You should include text.html.basic last. Order matters; the syntax parser goes over each line of the source code and tries each pattern in the tmLanguage file, top to bottom, until it finds a match. When it does so, it moves to the end of the pattern specified in the match and continues again down the source.

0 Likes

#6

I know I’m a little late to the party, but I’m trying to get syntax highlighting for HTML with angular tags working.

I’m just trying to get the embedded js in ng-* attributes on HTML tags highlighted like normal javascript. I’m unable to get highlighting working inside <> however, an ng-show=“alert(‘example’)” would work fine, but as soon as it’s in an HTML tag it stops working.

Here’s the JSON I have so far:

{ "fileTypes": "html", "ng.html"], "name": "HTML (Angular.js)", "patterns": { "begin": "ng-(\\w+)=\"", "captures": { "0": { "name": "punctuation.section.embedded.js" } }, "end": "\"", "name": "source.js.embedded.html", "patterns": { "include": "source.js" } ] }, { "include": "text.html.basic" } ], "scopeName": "text.html.angular", "uuid": "0f6484f8-de59-4506-88f1-4c5dfb4449ee" }

0 Likes