The Devver Blog

A few weeks ago, I wrote about my desire for an awesome embeddable code widget.The most common solution that people suggested in the comments (and on the thread on Stack Overflow) was SyntaxHighlighter. I had seen the SyntaxHighlighter (SH) widget on a few blogs and was impressed, so I decided to install the WordPress plugin. The installation was easy enough, but unfortunately the plugin comes with a slightly old version of SH. Luckily, it was really easy to download the newest version from the SH site and drop it into the plugin.

Now we can just wrap code in <pre name='code' class='ruby'>...some code...</pre> and it will look like this:

class Foo
   def bar
     puts "Hello, world!"
   end
end

Pretty sweet! In fact, we ended up converting all of the code snippets on our blog to use SH.

Although SH is really, really cool, it does suffer from inherent drawbacks: it has to be installed and it has to be periodically updated. What I initially described in my previous post was something simpler - a web app where you could easily post code and then embed it in your blog. In other words, Pastie with a YouTube-like embed feature.

Dirceu Jr. pointed out Gist from GitHub, which is exactly what I was looking for. Even without signing up, you can post code (like so) and then embed it in your blog.

Dirceu Jr. even wrote a WordPress plugin if you really want to install something! The only weird thing is that while the embedded code is nicely syntax-highlighted, the original gist is not for some reason. Update: Yoan pointed out that you can get syntax-coloring by naming your gist properly (I renamed my gist foo.rb and it worked). It's still not clear to me why it doesn't work if I manually select 'Ruby' as the language for an unnamed gist, however.


Finally, while SyntaxHighlighter supports the most popular languages (and therefore is likely to be fine for most programming blogs), Gist supports a truly insane number of languages, making it a better choice if you want to post code snippets of say, Lua, Erlang, or Haskell.

Both of these projects provide great-looking ways to display code on your blog. If you know of other projects that you like, let me know in the comments.