You may have noticed a change recently. If you didn’t, either you don’t care that much or you don’t NERD that much. As I’m getting more into Ruby and just more obsessed with programming in general there I’ve been wanting to, and trying to paste little snippets and pieces of fun code as I discover them. This should have been a piece of cake. Should being the operative word. The first hurdle to over come was just making code that I pasted into WordPress not get gobbled up and turned into star-bellied sneetch in other words when I paste:
It shouldn’t end up
That was easily solved by some helpful plugins.
That was only part of what I wanted though. What I really wanted was to have the code look like it did in TextMate. Code, especially long chunks, is just more readable with colors. I poked around for WordPress plugins, but alas the search was futile. Then it was looking at other sites that used code coloring and figuring out how they do it. RailsWeenie has some nifty syntax jazz. A couple more googles, and I stumbled upon two promising links. First, RoRPaste which is a paste-bin just for Rails code, works well, but doesn’t have too many features at this time. Mainly, there’s really no way to get the code off the paste-bin once you put it there. I contacted the developer and suggested some things, offered my help, and he said he’d consider it. Next, I found rebbin, which is an open-source paste-bin project written in Rails. After, downloading it and poking around I noticed the syntax highlighting was all done with a neat little shell script call highlight that can take a various number of sources and convert them to XHTML and CSS. I had no real use for rebbin, but this got me thinking.
One, I want to create a web-service for syntax highlighting. It would be a completely RESTful service with a couple basic calls.
Posting to http://highlight.quirkey.com/ruby/xhtml with your source in the post body would return a XHTMLized version of your code with different CSS classes for types of keywords, etc. This could just be a REST front end for the highlight shell script. I would have already set it up, but being on a shared host here, I cant install the script. (Aside: anyone want to provide a server for doing this?)What’s the point of creating a highlighting web service? Well on top of this web service, you could
- Provide syntax highlighting for any sort of application
- Create a WordPress plugin that runs any thing between <code> tags into highlighted source.
Unfortunately, I couldn’t do it on my server. So how did I do it in the end? Of course, the last place I looked is the first place it should have been – in TextMate itself!
The TextMate bundle has a series of scripts that makes converting beautiful code to beautiful XHTML. Heres a quick step by step of how I got it working for me.
- Pick the TextMate theme youd like to use for your highlighting (I used ‘Twilight’ which is my default coding theme. Get some cool themes here). Go to Bundles > TextMate > Create CSS From Current Theme. This should create a new document with all the CSS you need. If you want this to be the default colors for all your <pre> and <code> tags, do a simple find and replace of ’.your_theme_name’ -> ’’.
- Save this document to your WordPress theme root (/path/to/wordpress/wp-content/themes/your_theme/mate.css)
- Include it in your header
- Now when you want to paste some code out of TextMate, select the text and do Bundles > TextMate > Create HTML From Selection.
- Copy and paste this code into your blog post and viola:
I added some extra rules to the CSS to increase the padding and make it fit nice in my pages. Now I just have to go back to all the old posts and make them sparkle. I still want to do the web service. If you’re interested in helping, or have more ideas, hit me up.