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.

Twitter timeline now working again on my blogs

No more annoying authentication pop up windows. Please let me know if they come back.

Link

Disabled Twitter timeline on my blogs

There is currently a problem with the Twitter badge on my blogs and many other blogs out there (not just WordPress or Blogger), so I've commented out the javascript until it gets fixed by Twitter. Every time the page is loaded the end user is prompted for a Twitter username and password. With everyone nervous about phishing, I decided to disable it for now until it is resolved.

Hudson versus Cruise search yields unexpected results

I just ran the following Google search to find articles comparing the continuous integration tools Hudson and CruiseControl:

hudson versus cruise

And I got this funny and unexpected result, Kate Hudson Vs Suri Cruise - Who Wore It Best?.

JournalSpace is wiped out, gone, and up for auction on eBay.

Some really bad news for the JournalSpace bloggers out there. Five years of data lost because the JournalSpace company didn't have backups of their SQL Server database. Big oops. And it put the company out of existence, with their domain up for auction on eBay. So, let this be a wake up call, or simply a reminder, to back up your data or create a backup plan if you don't have one. I for one will be backing up my two blogs on Blogger.com. Here is more on the story: LiveJournal