Thursday, May 24, 2012

Blogger and code snippets

It's way harder than it needs to be to publish syntax-highlighted HTML code snippets to Blogger. Here's the process I've gone through so far to get Blogger to behave.

Okay Idea: highlight.js

There's highlight.js which looks for <code> blocks and colors them on the client side. It works well for Python and Javascript, but I also want to publish HTML snippets, like this:

    <style>
.blue {
background: #00f;
}
</style>

It's very tedious manually turning all the < and > into &lt; and &gt;. It was tedious enough doing it for that sentence, let alone a 20 line chunk of HTML. There must be a better way.

Bad Idea: Escape in Javascript

I toyed with escaping it in Javascript like this:

var codes = d3.selectAll('code')[0];
codes.each(function(tag) {
tag.innerHTML = tag.innerHTML
.replace(/>/g, '&gt;')
.replace(/</g, '&lt;');
});

This is bad because any script tags would actually be executed.

Getting Warmer: Google API, Jinja and Pygments

Then I remembered that Google provides an API for Blogger. I'd used it once long ago, but didn't really have a need for it. Now I do! I followed this Python reference to make a terribly-written, wonderfully-functional script that:

  • Uses Pygments to highlight code snippets using a
  • Custom Jinja extension to
  • Authenticate and post to Blogger
I've published the script on github if you'd like to use it or improve it.

Annoyances

The script in its current form is annoying for a few reasons:

  1. Blogger replaces all newlines with <br /> tags, forcing the script to remove all superfluous newlines before submitting (while maintaining newlines in <pre> tags).
  2. My Jinja extension does well for code blocks, but doesn't work for inline code snippets.
  3. Mostly because of the newline problem, I have to write my posts in HTML... which is good and bad. It's good because I know what HTML will be generated. It's bad because it's not as fun to write as say Markdown or ReST.

Help

Does anyone else have a better method for posting syntax-highlighted, escaped HTML snippets to Blogger?