Mmmm… Twilight. Go ahead and use command+ and command- to increase or decrease the text size in your browser. You can’t do that with screenshot GIFs!

The way TextMate understands various languages (e.g. HTML, CSS, Ruby) is via “bundles”. Bundles also define extra “commands” to the editor e.g. there’s a command to run the W3C syntax validator on the current document. There are a bunch of bundles that ship with TextMate, and there are also a bunch being developed by the community.

Anyhoo, over on #refreshdallas IRC yesterday evening I was asking if anyone knew of a way to induce TextMate to output a styled HTML file for whatever file you were currently editing. The idea was that if I was editing Ruby, or CSS, or HTML or whatever, and I’d chosen a particular theme, and I liked the way that looked — I’d like to be able to press a button and generate an HTML document that I could drop into my blog or into an S5 presentation. The way I’ve been doing this lately is to capture a TIFF of the TextMate window via Grab but that’s just tedious (have to convert to GIF and then there are all the sizing limitations associated with images.)

While I was on the #refreshdallas IRC I was also on the ##textmate IRC asking similar questions and some really helpful people told me about the “Experimental” bundle. It had a command very close to what I needed called “View Document as HTML”. That one did not use the current theme to generate the CSS (it had a hard-coded CSS embedded) and it didn’t show the HTML — it rendered to a WebKit HTML window directly. They suggested I use that command as a starting point, so I played around w/ it a bit and made a little progress.

And then I watched a movie and went to sleep…

And when I woke up this am, ready to go do this thing, I decided to start clean and do a fresh “svn co” on the Experimental bundle before getting down to the business of writing a TextMate-theme-to-CSS transformation (XSLT) and wrapping that in a TextMate command and mashing it up with the “View Document as HTML” genetic material. When lo I noticed in the Experimental/Commands a new entry: “Create HTML from Document / Selection”.

So I ran it.

Up popped a new editor window containing an HTML document with loads of delicious CSS and the target document rendered in the body all formatted nice w/ spans w/ class attrs.

I hit command-B to render that file in the browser and pow! Up popped a Firefox window that looked very much like the original TextMate window! The layout was great. The colors perfect. The font was a little off, but hey, that can be tweaked.

So what elf was responsible for delivering this overnight gift? A bit of poking around on ##textmate revealed it was a certain Brad Choate had contributed this blessed addition. Now I’m off to plumb the sublime depths of his implementation.

As explanations go, it doesn’t get much more straightforward than Cody Fauser’s excellent post on Rails RJS Templates. When you try it out though, you may notice that TextMate doesn’t know that RJS templates which by convention have an “.rjs” suffix, are really Ruby code. If you want to make TextMate aware of the “.rjs” suffix simply open the Bundle Editor window, navigate to the Ruby bundle, scroll down to the Ruby language definition (it has a Gray circular icon with an “L” on it), and add ‘rjs’ to the list of fileTypes.

Once you do that, TextMate will treat .rjs files like other Ruby files and you’ll get syntax highlighting and stuff.