Highlight me, baby

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:

$code->with_arrows

It shouldn’t end up

$code->with_arrows

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
  1. Provide syntax highlighting for any sort of application
  2. 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.

  1. 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’ -> ’’.
  2. Save this document to your WordPress theme root (/path/to/wordpress/wp-content/themes/your_theme/mate.css)
  3. Include it in your header
  4. Now when you want to paste some code out of TextMate, select the text and do Bundles > TextMate > Create HTML From Selection.
  5. Copy and paste this code into your blog post and viola:
class Port < ActiveRecord::Base
  belongs_to :user
  
  def self.last_export_time
    self.find(:first,
              :conditions => ["im_or_ex = ?","ex"],
              :order => "created_at DESC").created_at
  end
  
end

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.

18 Responses to “Highlight me, baby”

[…] Found this post on using TextMate for coloring code in blog posts. Works great – except for a couple of tab issues, see post blow the comments should be aligned and the bottom if is kinda wacky – I swear in my code it’s all indented properly! […]

Matte Says: #

Thank you for your tip! I had the same dream, about textmate style coding!
bye

AQ Says: #

I’m glad people are using this little trick, I’m still interested in making it a one-step process at some point.

marios Says: #

Just came across this. I am trying to do exactly the same thing for TXP.
I had considered Geshi but well, it just looks too clumsy.
So here : http://www.consking.com/delyriumlab/test-article-for-syntax-highlighting
is my test version for the above method, which is a theme that I use for the TXP bundle.

I’ll skip some some scopes for the styles, leaving some strings with . . in-between.

The first time, when I used pastie, I was saying, whow, how did they do this ?

What I would like to achieve is to make it a plugin for TXP.

Thanks for the nice article,

regards, marios

AQ Says: #

Cool, Marios! It looks like you’re off to a good start.

marios Says: #

Just coming back to this.
A couple of days ago, I had the Idea to have that as a drag command instead.
In other word. Using the Ruby code accessing the same requires and replacing the TM_SELECTED_TEXT variable with a variable that holds the contents of the TM_DROPPED_FILE, then you could just insert your code snippet from your neatly organized code Folder (e.g>: file extension code or something) while writing your post.

One would want to omit the output of the CSS in this case, as this is already referenced beforehand in the header.

I played a little with it, but doesn’t get the the html code just the CSS.

In bash to get the content of my code file, I would just do :

cat “$TM_DROPPED_FILE”

Any Ideas ?

AQ Says: #

marios: Poking in the Textmate Bundle editor . . . Couldnt you do
print ENV[TM_DROPPED_FILE].read
? Let me know if you make more progress, This has awesome potential.

marios Says: #

Nope, not yet. I don’t know any Ruby, nut I let you know, if I found something.

regards

marios Says: #

Sorry again, the above post of mine has a typo, it was supposed to read “but” instead of “nut”
(Not to have any misunderstandings, it is really a typo), I am still working on the drag command. I’ll be back. thanks

regards

marios Says: #

Aaron, I have found a solution that will not solely rely on a drag command.
It is a little different, since it will not do what we want an the initial drag command,
but it provides a nice way to maintain the code snippets, writing from within the same document window without loosing focus, while dragging in the code snippets and then
finally do the transformation of the document.

I have tested it now and it works great.

I’ll let you know.

cheers, marios

AQ Says: #

Hey marios,
when you have something working, please send it along and I’ll try it out and post it here (with all due credit given, of course)

marios Says: #

Not quite there, but almost, if you want to elaborate on it, please go ahead.
(What needs to be done is to take care for multi-line matching)

http://www.consking.com/delyriumlab/prettify-your-code

regards, marios

As a whole, the discussion has been healthy and fruitful for developers. Keep it up.

Don Lapre Fan
webmaster@j-ams.org
http://www.j-ams.org

Aaron, this is just what i’ve been looking for to use on my new blog. Thanks for the tip!

[…] Aaron Quint also deservingly gushes over these two commands. […]

Alex Says: #

André did a plugin to include highlight features to wordpress: http://www.andre-simon.de/dokuwiki/doku.php?id=en:wordpress

[…] It can be a little tricky to get code in your WordPress blog to look as good as it does in TextMate. I began with this article as a guide but departed form it in a couple of places. The following steps describe how I set up code formatting on this blog. […]

[…] do WordPress para colocar códigos com syntax highlight nos meus posts, cheguei até a este link: Highlight me, baby. O autor descreve o mesmo problema que eu estava tendo e então chega a conclusão que somente é […]

About

QuirkeyBlog is Aaron Quint's perspective on the ongoing adventure of Code, Life, Work and the Web.

twitter/@aq.

instagram/@quirkey.

github/quirkey.

QuirkeyBlog is proudly powered by WordPress

Categories