Hi. I'm Kevin Sawicki with Aptana, and today I'm going to go over the new colorization system. This video will focus on the colorization of CSS, so I have a sample CSS file created from a YUI project that I'm just going to open. And in this, you'll see our current colorization for the CSS language, and to be able to change this, I'm going to go to Window > Preferences..., and under the Aptana Editors section, you'll see for each editor we have, there's a colors preference under there that'll let you change how a language is colored.

So to select the CSS, you'll see this new layout that we have in place to change the syntax highlighting for a given language. So it's organized by category and token. So a category is a whole group of tokens that are similar; so for most languages, there are things such as keywords, literals, punctuators, and white space. And under that, it's broken down to the actual token; so under Punctuation, for example, there's things such as colons, commas, equal sign, and so you can colorize both and entire category of tokens and also a specific token.

So say, for example, I want to change just the way the colons are colorized, so I can see my base colorization for all punctuators. They have a black foreground and they're bold. So if I want to override this category-wide colorization for a specific token, for the colon token, I'll select the box and then be able to change the color. I probably want a nicer, flashier color for colons. Select that. And then also make them italicized. So after I click OK, I can see my editor now has italicized, purple colons; yet all my other punctuators are still the bold, black color.

So to go back and go...a deeper colorization option is to create a colorization region for a given token. So in CSS, there’s comments that start with "/*" and end in "*/". Now, say I want to have just the first two characters, the "/*", and the last two characters, the "*/" colorized differently than the whole content of the comment, that's actually possible with our new colorization system. So I'll select the Comment token, override the category level colorization, still set the content to green, and I'll select this Show Advanced Options check box. This will reveal the region colorization part of the system that will allow you to colorize certain parts of a token.

So I want to add a new region that represents the first two characters of a comment token, being the "/*". So I’ll say, give it a Name, Start, Comment, and the offset is "0", meaning the start of the string, and I want it to be a Length of "2" to cover both the slash and the star; and the color of it I will make a nice pink and make that bold, and so that covers the first part. And now I want add a second region for the end of the comment--the "*/*. So to represent the end of this token, there's a keyword link that allows you to start at the end of the string and work your way back. So starting at Link - 2, I want to have another region of Link 2, and I will set that to purple now, and, again, make that bold. And you'll notice that when I added a region, an icon appeared next to the Comment token. This icon denotes that a token has regions. So when you're looking at the token table, you can see which ones will have actual regions in this region colorization area. So now I want to click OK, and now I see that Comment have these regions, but still green comment content.

So this really allows you to play around with your colorization for any language, and if I want to back up my changes, I can restore defaults at any time. But, also, I can import and export. So these colorization files created are an XML based file format that can be created using our XML editor and then imported into the ID. So say you tweaked a colorization and now you want to share it with someone, just click Export, give it a name. .col is our colorization file format extension. Save it out to desktop, and there you go.

And then, for example, now, if I restore default, I see that I no longer have colons colorized or comments with regions, but I can import that colorization I just created, and now I see that I have my purple colons and my comment tokens with my special starting and ending characters.

So that really highlights all the possibilities of the colorization system, and this is available for each editor. So you can see for HTML has regions defined and also all the tokens and categories defined, too. And this hopefully proves to be a more flexible system and allow people to share cool colorizations and really go a step further into creating an editor environment that they truly enjoy.

So thank you for your time, and I hope you enjoy this new system.

[End of Video]