« Rails to Excel
You shouldn’t have to be taught »
 

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.

Posted on Thursday, July 13th, 2006 at 3:51 pm in Development, Geekery, Rails, Ruby.
You can leave a response, or trackback from your own site.

18 Responses to “Highlight me, baby”

  1. Vixiom Axioms » Code Highlighting Says:
    July 26th, 2006 at 4:22 am

    [...] 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! [...]

  2. Matte Says:
    September 12th, 2006 at 6:39 am

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

  3. AQ Says:
    October 3rd, 2006 at 10:43 pm

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

  4. marios Says:
    November 7th, 2006 at 12:37 am

    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

  5. AQ Says:
    November 7th, 2006 at 10:05 am

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

  6. marios Says:
    November 16th, 2006 at 5:35 pm

    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 ?

  7. AQ Says:
    November 16th, 2006 at 6:08 pm

    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.

  8. marios Says:
    November 17th, 2006 at 4:42 am

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

    regards

  9. marios Says:
    November 18th, 2006 at 2:21 pm

    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

  10. marios Says:
    November 19th, 2006 at 11:47 am

    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

  11. AQ Says:
    November 19th, 2006 at 12:39 pm

    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)

  12. marios Says:
    November 19th, 2006 at 9:46 pm

    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

  13. Don Lapre Fan Says:
    December 8th, 2006 at 3:21 am

    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

  14. Barry Keenan Says:
    March 21st, 2007 at 6:44 pm

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

  15. Web Syntax Coloring Says:
    April 5th, 2007 at 1:35 am

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

  16. Alex Says:
    April 22nd, 2007 at 4:29 pm

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

  17. Bitbutter » Blog Archive » Displaying Textmate code in your WordPress blog Says:
    July 25th, 2007 at 8:26 am

    [...] 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. [...]

  18. Colocando códigos num post do Wordpress | Um passo de cada vez... Says:
    August 28th, 2008 at 2:38 pm

    [...] 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 é [...]

Leave a Reply