Home Download Buy Blog Forum Support

How to extend an already existing tmLanguge

How to extend an already existing tmLanguge

Postby aziz on Tue Apr 24, 2012 4:13 pm

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?
Last edited by aziz on Wed Apr 25, 2012 8:39 am, edited 1 time in total.
PlainTasks: my opinionated todo plugin
tmThemeEditor color-scheme editor for SumblimeText and Textmate (code on github)
aziz
 
Posts: 40
Joined: Thu Jan 12, 2012 6:29 pm

Re: How to extend an already existing .tm

Postby nick. on Tue Apr 24, 2012 5:25 pm

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>
nick.
 
Posts: 266
Joined: Wed Jan 18, 2012 3:45 am

Re: How to extend an already existing .tm

Postby aziz on Wed Apr 25, 2012 8:03 am

Thanks man, I don't know why I've not been able to find that thread. maybe I should blame the forum search capabilities :)
PlainTasks: my opinionated todo plugin
tmThemeEditor color-scheme editor for SumblimeText and Textmate (code on github)
aziz
 
Posts: 40
Joined: Thu Jan 12, 2012 6:29 pm

Re: How to extend an already existing .tm

Postby aziz on Wed Apr 25, 2012 8:38 am

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"
}
PlainTasks: my opinionated todo plugin
tmThemeEditor color-scheme editor for SumblimeText and Textmate (code on github)
aziz
 
Posts: 40
Joined: Thu Jan 12, 2012 6:29 pm

Re: How to extend an already existing tmLanguge

Postby nick. on Wed Apr 25, 2012 1:37 pm

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.
nick.
 
Posts: 266
Joined: Wed Jan 18, 2012 3:45 am

Re: How to extend an already existing tmLanguge

Postby blitzkev on Fri Aug 09, 2013 12:59 am

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:
Code: Select all
{
  "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"
}
blitzkev
 
Posts: 1
Joined: Fri Aug 09, 2013 12:49 am


Return to Plugin Development

Who is online

Users browsing this forum: Exabot [Bot] and 9 guests