Reputation: 115
Im trying to create my own theme in Sublime Text 2 to highlight CSS syntax. All I have left is keyframes
.
@-webkit-keyframes spin { /* some rules */ }
@-moz-keyframes colorize { /* some rules */ }
@-ms-keyframes spin { /* some rules */ }
@-o-keyframes spin { /* some rules */ }
@keyframes colorize { /* some rules */ }
I want to highlight the initial @
and the word keyframes
without highlighting engines prefixes, like -webkit-
, or -moz-
, so only @keyframes
must be returned.
What is the right regexp for that?
I tried:
((?<=-webkit-)|(?<=-moz-)|(?<=-ms-)|(?<=-o-)|)keyframes
but that doesn't include the @
and doesn't even return the keyframes
in Sublime text at all.
Update ----
Thanks to Cheruvian, I realized what was in front of me all along.
Sublime's parser structure is (I added the comments after I realized what are the <key>name</key>
):
<dict>
<!-- Regexp pattern -->
<key>match</key>
<string>\s*(@)(-(webkit|moz|ms|o)-)?(keyframes)</string>
<!-- Referencing to the groups captured above -->
<key>captures</key>
<dict>
<!-- 1st group captured -->
<key>1</key>
<dict>
<!-- Referencing name -->
<key>name</key>
<string>keyword.control.keyframes.css</string>
</dict>
<!-- 2nd group captured -->
<key>2</key>
<dict>
<!-- Referencing name -->
<key>name</key>
<string>punctuation.definition.keyword.css</string>
</dict>
<!-- n group captured -->
<key>n</key>
<dict>
<!-- Referencing name -->
<key>name</key>
<string>some.name.css</string>
</dict>
</dict>
</dict>
From that, all I had to do was to group the regex and select the groups I wanted and give them some unique referencing strings.
Upvotes: 0
Views: 93
Reputation: 5877
Assuming sublime uses capturing groups you can use:
(@).*?(keyframes)
regex capturing groups are indicated by parentheses. (From phone will try to clean up later)
Upvotes: 1