How to extend an already existing tmLanguge

[aziz]

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

Code: Select all

<?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>
   </array>
   <key>scopeName</key>
   <string>text.html</string>
   <key>uuid</key>
   <string>de8141c6-c6a3-4452-8a75-eb0f527dc043</string>
</dict>
</plist>


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?

[nick.]

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

Code: Select all

    <?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>


[aziz]

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

[aziz]

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

Code: Select all

{ "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"
}


[nick.]

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.