Using TextMate Syntax Highlighting in your Blogger Blog

When writing about code in your Blogger blog, it's helpful to be able to highlight the syntax to keep things readable. Doing this in CSS is a chore, but luckly, TextMate will do it for you.

Turning

@ideas = Idea.think_something
@ideas.each do |idea|
    idea.build
    idea.try
    if idea.good?
        idea.keep
    else
        idea.trash
    end
end

into

@ideas = Idea.think_something

@ideas.each do |idea|
  idea.build
  idea.try
  if idea.good?
    idea.keep
  else
    idea.trash
  end
end

makes things a little more readable, right?

Here's how to do it. Open a new TextMate file and cut/paste/input the code you want to be in your blog. Make sure you've selected the TextMate theme and syntax highlighting options you want to use. Also make sure you haven't selected any of the text in your file.

Go to Bundles > TextMate > Create HTML From Document

Instantly, TextMate will create a new HTML file, but with automatically generated CSS that matches your TextMate theme. Just cut and paste the entire style tag and its contents and the contents of the body tag (but not the body tags themselves) into your blog post. You'll need to do this with your Blogger editor set to "Edit HTML".

If you'll be writing about code a lot, you might want to cut and paste your TextMate CSS into your Blogger template. Just put tack it onto the existing CSS in your template (go to the "Edit HTML" page on the "Design" tab). That way, you don't need to copy the CSS every time you have some code in your blog.