Thursday, June 14, 2012

Customizing ColdFusion Highlighting in Sublime Text 2


This post assumes that you have Package Control installed in Sublime Text 2. If not, find out more about it here:  http://wbond.net/sublime_packages/package_control

If you haven't already installed the ColdFusion package in Sublime Text 2, you will need to do so before continuing. To install the ColdFusion package through Package Control:

  • In Sublime, type [ctrl]+[shift]+p (Win/Lin) or [cmd]+[shift]+p (Mac) to open the Command Pallette
  • Choose "Package Control: Install Package" from the list
  • Type ColdFusion in the text box
  • Select the ColdFusion package from the list
Once the ColdFusion package is installed, take it for a spin and give it time to sink in that you won't have to rely on the bloated clunkiness of ColdFusion Builder any longer. WIN!


For me, one thing I needed to change was the color scheme for ColdFusion versus HTML tags, since by default they both have the same color scheme. To highlight ColdFusion tags in a different color from the html tags:
  • In Sublime Text 2 open up Preferences -> Browse Packages and then go to the Color Scheme - Default directory
  • Open the theme file for the theme you are using. For instance, I am using the Monokai theme, so I opened the Monokai.tmTheme file
  • Add the following code before the final </array> tag in this file
<!-- BEGIN ColdFusion specific coloring -->
<dict>
    <key>name</key>
    <string>CF tag name</string>
    <key>scope</key>
    <string>entity.name.tag.conditional.cfml, entity.name.tag.declaration.cfml, entity.name.tag.other, entity.name.tag.cf, entity.name.tag.inline.other.cfml</string>
    <key>settings</key>
    <dict>
         <key>fontStyle</key>
         <string>bold</string>
         <key>foreground</key>
         <string>#A9BBDB</string>
    </dict>
</dict>
<dict>
    <key>name</key>
    <string>CF tag brackets</string>
    <key>scope</key>
    <string>punctuation.definition.tag.begin.cfml, punctuation.definition.tag.end.cfml, punctuation.definition.tag.begin.ctml, punctuation.definition.tag.end.ctml, punctuation.definition.tag.start.cfml</string>
    <key>settings</key>
    <dict>
         <key>fontStyle</key>
         <string></string>
         <key>foreground</key>
         <string>#A9BBDB</string>
    </dict>
</dict>
<dict>
    <key>name</key>
    <string>CF tag attribute</string>
    <key>scope</key>
    <string>meta.tag.block.other.cfml, entity.other.attribute-name.cfml, entity.other.attribute-name.name.cfml</string>
    <key>settings</key>
    <dict>
         <key>fontStyle</key>
         <string></string>
         <key>foreground</key>
         <string>#CF99D1</string>
    </dict>
</dict>
<dict>
    <key>name</key>
    <string>CF tag attribute quotes</string>
    <key>scope</key>
    <string>punctuation.definition.string.begin.cfml, punctuation.definition.string.end.cfml</string>
    <key>settings</key>
    <dict>
         <key>fontStyle</key>
         <string></string>
         <key>foreground</key>
         <string>#A9BBDB</string>
    </dict>
</dict>
<dict>
    <key>name</key>
    <string>CF tag attribute values</string>
    <key>scope</key>
    <string>string.quoted.double.cfml</string>
    <key>settings</key>
    <dict>
         <key>fontStyle</key>
         <string></string>
         <key>foreground</key>
         <string>#CCCCCC</string>
    </dict>
</dict>
<dict>
    <key>name</key>
    <string>CF tag equals signs</string>
    <key>scope</key>
    <string>meta.tag.inline.cfml, punctuation.separator.key-value.cfml</string>
    <key>settings</key>
    <dict>
         <key>fontStyle</key>
         <string></string>
         <key>foreground</key>
         <string>#CF99D1</string>
    </dict>
</dict>
<dict>
    <key>name</key>
    <string>CF tag variables</string>
    <key>scope</key>
    <string>meta.tag.inline.cfml variable.other.cfscript, meta.tag.block.conditional.cfml variable.other.cfscript</string>
    <key>settings</key>
    <dict>
         <key>fontStyle</key>
         <string></string>
         <key>foreground</key>
         <string>#FFFFFF</string>
    </dict>
</dict>
<dict>
    <key>name</key>
    <string>CF comments</string>
    <key>scope</key>
    <string>comment.block.cfml, comment.line.cfml, comment.line.double-slash.cfscript, comment.block.cfscript</string>
    <key>settings</key>
    <dict>
         <key>fontStyle</key>
         <string></string>
         <key>foreground</key>
         <string>#000000</string>
         <key>background</key>
         <string>#999999</string>
    </dict>
</dict>
<!-- END ColdFusion specific coloring -->
  • Save the file and then open up a ColdFusion page, your CF tags should be a different color
  • To change the color of the CF tags, adjust the hexadecimal colors in the new code block

More info:

Sublime text uses selectors to identify parts of the code for coloring. You will see that the outer <dict></dict> code blocks contain a <key>scope</key> section followed by a <string></string> section. You put the selectors in this <string></string> section.

You can get the selector names to identify different parts of your code by going to one of your code pages and highlighting the code you want to color. Then hit [ctrl]+[alt]+[shift]+p (Win/Lin) or [cmd]+[opt]+p (Mac) to display the selector in the status bar at the bottom. To copy the selectors to the clipboard hit [ctrl]+` (Win/Lin) or [cmd]+`(Mac) to open the console and paste the following code into it: sublime.set_clipboard(view.syntax_name(view.sel()[0].b)) If you find a good resource for altering/creating themes post it here! The basis for the information on this page can be found at: http://stackoverflow.com/questions/9345222/syntax-specific-highlighting-with-sublime-text-2

2 comments:

  1. Perfect, I continued to look online for the just the right scope selectors for CF and you've already done it. TY

    ReplyDelete
  2. thx dan, this is just what I needed

    ReplyDelete