What's it all about, Alfie?

This morning I was getting tired of the pretty lame syntax highlighting of YAML files in Sublime Text 2 - and I know it could be better. So I started digging. The first thing I looked at was the tmTheme file that I can cloned of the Eiffel theme in the standard release package. It's close… white background, nice colors, but it's not perfect, and I wanted perfect. So here's what I found out.

The matching of the language is really in the tmLanguage files in the packages. These are a bunch of regexs, and it's fine, but each pattern match then pins the color to use to some "classification" - a dotted-notation similar to a Java package. The idea is that if you specify only the first part or parts, then the last parts are up for specialization.

For instance, if you want to have a numeric constant style, it makes sense to build them hierarchically: constant -> numeric -> yaml, this leads to the classification: constant.numeric.yaml. But if you want all constants to be a certain style (by default), you can simply specify the constant style in your tmTheme file.

Alternatively, if you want all your numeric constants to be a certain style except those in java, you make a style for constant.numeric and then a new one for constant.numeric.java. Simple. But certainly not simple to figure out by looking at the files.

So I realized that for YAML, I didn't want the 'Embedded source' to have a colored background. So I added:

  <dict>
    <key>name</key>
    <string>Embedded source</string>
    <key>scope</key>
    <string>source.php.embedded.block.html, string.unquoted.yaml</string>
    <key>settings</key>
    <dict>
      <key>background</key>
      <string>#FFFFFF</string>
    </dict>
  </dict>

so now it's got a white background. Nice.

The next thing was to notice that I didn't like that the keys in YAML were red like almost all the text (strings, constants, etc.) so I wanted to make those keys blue:

  <dict>
    <key>name</key>
    <string>Markup name of tag</string>
    <key>scope</key>
    <string>entity.name.tag.yaml</string>
    <key>settings</key>
    <dict>
      <key>fontStyle</key>
      <string>bold</string>
      <key>foreground</key>
      <string>#1C02FF</string>
    </dict>
  </dict>

and now the keys are a nice blue. Much better!

All this is just in my clone of the Eiffel theme in the Packages/User/ directory in the Application Support for Sublime Text 2. Very nice.

UPDATE: I realized it should be easy to do the same for PHP - which has the annoying background color, and it was! You simply have to look into the tmLanguage file and see the tag name that's used and place it in the string in a simple comma-delimited list. Very slick!

UPDATE: I noticed a few more that I wanted to add - all from the HTML syntax highlighting. The code became:

  <dict>
    <key>name</key>
    <string>Embedded source</string>
    <key>scope</key>
    <string>
      source.php.embedded.block.html,
      source.css.embedded.html,
      source.js.embedded.html,
      source.python.embedded.html,
      source.ruby.embedded.html,
      string.unquoted.yaml
    </string>
    <key>settings</key>
    <dict>
      <key>background</key>
      <string>#FFFFFF</string>
    </dict>
  </dict>

This entry was posted on Thursday, September 6th, 2012 at 9:03 am and is filed under Coding, Vendors. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.