Better Color Options for JSPs in Sublime – Day After Tomorrow Night

Well, we are officially making the transition to sublime as a team. I for one am happy, as this will make it much easier for us to share and version control many of the short cut benefits of this powerful coding tool. Its also an application that is very singular in how customizable it is, through preference files in JSON format.

One of said preference files is the tmTheme file, which is used for creating a color scheme for the codebase in sublime. It, as well as all files in this post, are located in ~/Library/Application Support/Sublime Text 2. Now, there are quite a number of good theme files out there, however none seem to play well with JSPs, at least not well enough for myself. I for one cannot have my JSTL tags the same color as my html. Blasphemy!

So, I proceeded to edit the theme to my liking, starting with a theme called “Tomorrow Night.” This started off well, however I came upon a stumbling block: the language file for JSP just wasn’t granular enough to color what I wanted. I could make JSP tags purple, but had no control over their child attributes or operators. This would not do. Enter the tmLanguage file:

XML

<!-- Targeting all of the JSP tags/attributes separately; This should let us color them however we want -->
<dict>
	<!-- Start by targeting all alphanumeric tags with colons in them -->
	<key>begin</key>
	<string>(</?)([a-zA-Z0-9]++(:)[a-zA-Z0-9]+)</string>
	<key>beginCaptures</key>
	<dict>
		<key>1</key>
		<dict>
			<key>name</key>
			<string>punctuation.section.embedded.dsp</string>
		</dict>
		<key>2</key>
		<dict>
			<key>name</key>
			<string>meta.tag.block.dsp</string>
		</dict>
	</dict>
	<!-- then target the closers purple -->
	<key>end</key>
	<string>(>)</string>
	<key>endCaptures</key>
	<dict>
		<key>1</key>
		<dict>
			<key>name</key>
			<string>punctuation.section.embedded.dsp</string>
		</dict>
		<key>2</key>
		<dict>
			<key>name</key>
			<string>meta.tag.block.dsp</string>
		</dict>
	</dict>
	<key>patterns</key>
	<array>
		<!-- target the substrings separately -->
		<dict>
			<key>match</key>
			<string>([""'])(?:(?=(\?))2.)*?1</string>
			<key>name</key>
			<string>string</string>
		</dict>
		<!-- target the equals separately -->
		<dict>
			<key>match</key>
			<string>([=])</string>
			<key>name</key>
			<string>constant.other.color</string>
		</dict>
	</array>
</dict>

This guy let me add more granularity to the language targeting, such as looking for tags with the colon character in them, surrounded by anything alphanumeric. This is a very common structure in JSTL.

Once I set this up, I was able to target specific pieces in my JSP tags in order to color them. The specific string names that I setup are in red below, pointing to the specific part of the code that is targeted to color:

Anywho, I’ve placed the code on Github for your use. You will need to clone two separate repos, as I have one for both the theme and language file:

Day After Tomorrow Night Theme
Updated Sublime Jave bundle

Any questions, just let me know.
Enjoy!