The Devver Blog

A Boulder startup improving the way developers work.

Displaying code on your 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.

[UPDATE: Since this post was published, we moved to WordPress.com, which doesn’t work with Gist. Now we a code plugin]

class Foo

   def bar
     puts "Hello, world!"
   end

end

view this gist

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.

Language SyntaxHighlighter Gist
Popular languages
ActionScript X
Bash X
C X
C# X X
C++ X X
CSS X X
Delphi X X
Diff X
Erlang X
HTML X X
Haskell X
Io X
Java X X
JavaScript X X
Lua X
OCaml X
Objective-C X
PHP X X
Perl X
Plain Text X
Python X X
RHTML X
Ruby X X
SQL X X
Scheme X
Smalltalk X
Smarty X
VB or VB.net X X
XML X X
Other crazy stuff
Batchfile X
Befunge X
Boo X
Brainfuck X
Common Lisp X
D X
Darcs Patch X
Dylan X
Fortran X
GAS X
Genshi X
Gettext Catalog X
Groff X
HTML+PHP X
INI X
IRC logs X
Java Server Page X
LLVM X
Literate Haskell X
Logtalk X
MOOCode X
Makefile X
Mako X
Matlab X
MiniD X
MuPAD X
Myghty X
NumPy X
Python Traceback X
Raw token data X
Redcode X
S X
Tcl X
Tcsh X
TeX X
Text only X
VimL X
XSLT X
c-objdump X
cpp-objdump X
d-objdump X
objdump X
reStructuredText X

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.

Written by Ben

November 13, 2008 at 11:19 am

Posted in Tools

15 Responses

Subscribe to comments with RSS.

  1. I'm really happy with WP-Syntax

    Vinícius

    November 13, 2008 at 11:51 am

  2. Re: Actual gist page not being highlighted – seems a little strange, in Ruby are there oepning/closing tags (I haven't used Ruby before)? I decided to give it a try to check the highlighting on PHP (and I will be using it, thank you very much!) and it was fine: http://gist.github.com/24560

    Ross

    November 13, 2008 at 12:05 pm

  3. nice. myself, I use a homegrown solution with Vim as backend, which gives me access to Vim's 500+ supported languages😉

    toupeira

    November 13, 2008 at 12:11 pm

  4. “the original gist is not for some reason.” give it an extension, like "Ruby.rb"

    Yoan

    November 13, 2008 at 12:14 pm

  5. No syntax hilighting for any kind of Lisp. meh.

    Foo

    November 13, 2008 at 5:26 pm

  6. Actually Gist supports both Common Lisp and Scheme.

    bhb

    November 13, 2008 at 6:21 pm

  7. I'm getting the idea that these only work for WordPress blogs, what if you're on Blogger – are there any good solutions?

    Phil

    November 13, 2008 at 8:46 pm

  8. Phil – I just tried using Gist embeds on Blogger. It works great! Just copy/paste the Javascript into your post.

    bhb

    November 13, 2008 at 9:03 pm

  9. Phil – I just tried embedded Gists on Blogger. It works great! Just copy/paste the JavaScript into your post.

    bhb

    November 13, 2008 at 9:04 pm

  10. Excellent posting. I've been using WP-Syntax, but I will be looking at Gist now. Thanks.

    Mark Nichols

    November 14, 2008 at 8:00 am

  11. What – no support for Clipper?🙂

    I've just started using Syntax Highlighter and it's working out great for me…

    Stephen Cronin

    November 16, 2008 at 11:44 pm

  12. When contrasting own/foreign service you're focusing only on positive sides of a hosted solution. But there's one big downside: you're relying on some else's good will to continue providing service or not. If they decide to change something, or even cancel Gist, you're on your own. That's why I'll stick to Syntax Highlighter – it works, and if it works, it generally doesn't need any updates🙂

    Leafnode

    November 17, 2008 at 12:19 am

  13. That's a very good point. Also, if they add "features" that you don't like (that say, make things more complex), you're sort of stuck with them.

    bhb

    November 17, 2008 at 11:43 am

  14. Wp-Syntax works with GeSHi and works great in wordpress.

    Fernando

    November 18, 2008 at 10:47 am

  15. […] instalação de um server próprio de bibliotecas de Javascript é sinalizada por Devver Blog neste artigo. Se trata de um Gist, um dos tantos progetos hospedados por […]


Comments are closed.

%d bloggers like this: