How to embed code snippets in your blog

Embedding code snippets in your blog can be tricky. Most blogs are set up with WYSIWYG editors, but when you paste your code snippet, the results may not be what you expected. In my case, I use Blogger.com, and I'm still using a default template. So, I've noticed that I don't have much real estate horizontally in the blog posting.

One of the first techniques I have tried is to simply wrap my code snippet with <blockquote> and <pre> tags. But since I have a set width on my blog, what can happen is this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris molestie eros. Nullam at justo quis eros feugiat blandit. Nulla sed nunc. Sed quis purus. Suspendisse potenti. Phasellus in ante. Cras ut nibh. Nulla ut odio. Phasellus mauris. In eu lectus eu dolor egestas tempus. Integer aliquam. Phasellus accumsan. Sed iaculis lacus in lacus. Aliquam erat volutpat. Vestibulum nulla enim, pharetra sit amet, tincidunt et, bibendum id, magna. Aenean elit. Vivamus nunc. 

The code disappearing off to the right (in Firefox) was not desirable. So I got fancy. I decided wrapping the code snippet with <pre> and <code> tags looked better. Especially if I added some special magic to the <pre> tag:

<pre style="border: 1px dashed rgb(153, 153, 153); padding: 5px; overflow: auto; font-family: Andale Mono,Lucida Console,Monaco,fixed,monospace; color: rgb(0, 0, 0); background-color: rgb(238, 238, 238); font-size: 12px; line-height: 14px; width: 90%;">

So, my previous example will now look like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris molestie eros. Nullam at justo quis eros feugiat blandit. Nulla sed nunc. Sed quis purus. Suspendisse potenti. Phasellus in ante. Cras ut nibh. Nulla ut odio. Phasellus mauris. In eu lectus eu dolor egestas tempus. Integer aliquam. Phasellus accumsan. Sed iaculis lacus in lacus. Aliquam erat volutpat. Vestibulum nulla enim, pharetra sit amet, tincidunt et, bibendum id, magna. Aenean elit. Vivamus nunc.

I still use this technique sometimes for smaller snippets of text, usually one-liners. But now my favorite way of embedding text is to use GitHub's Gist site. You just paste in your code at gist.github.com and then get the javascript to embed your code snippet. Now my example looks like this:



I like using GitHub because they have syntactical highlighters for many different languages. For example, here is a snippet in Ruby:



Note that there are other websites that do similarly, and GitHub is not unique. It just happens to be the one I prefer.