In the past I've done my blogging on Drupal and enjoyed the contributed modules for generating syntax highlighting on code snippets. Now that I'm moving to Blogger one issue was how to best present code snippets on the blog. After some searching I've found a suitable method using a browser-side JavaScript library (Syntax Highlighter), and customizing the blogger theme with a small bit of code.
Let's first start with the problem statement.
We want "code" generally to be presented with a fixed-width font if only so we have good control over indentation on code snippets. It would be nice to automatically highlight certain things in different colors to make it easier to read the code. It'll also be extremely useful if code snippets automatically scroll along the horizontal axis, because code snippets are often wide.
The first step is to use the <pre> tag, and to customize your theme a little bit. Using that tag automatically, generally, takes care of forcing a fixed-width font, so we can add one small bit of CSS to make enable scrollbars for <pre> tag content.
In the Blogger dashboard, navigate to the blog you want to enable this on, then head to the template section of that blog's dashboard. The currently selected theme will be shown at the top, so click the Customize button. Blogger will ask you to confirm you want to modify the template.
There's a consideration to make before you take this step. Blogger doesn't do a good job with customized templates. You're plopped into a screen where to edit the HTML/CSS/etc code of the template, and there's no attempt to separate out the kind of additions we're about to make so that you can easily switch to another template. You'll have to record somewhere the modifications you make, so that if you later switch templates you can re-apply the changes to that new template.
Now that you're editing the template go into the section of the template and insert this bit of code:
<style>
pre {
overflow-x: scroll;
}
</style>
What this does is tell the browser to add a horizontal scrollbar to <pre> tags.
We could stop at this point, and just recommend putting code snippets within <pre> tags. In a moment we'll go on to add the Syntax Highlighter library to make this prettier, but let's first ponder a little problem. The <pre> tags do nothing to hide other tags from being interpreted. Putting HTML tags within <pre> tags may cause those tags to be interpreted by the browser and it's safer to encode the tags to hide them from the browser. It's not just tags, because often we'll have less-than signs ('<') and other special characters in code snippets that the browsers might try to interpret.
What's needed is a tool to encode a block of text using HTML entities (e.g. < is the HTML entity for the less-than character). One such tool is: http://accessify.com/tools-and-wizards/developer-tools/quick-escape/. If you're hip to Node.js you could also take a look at this: https://github.com/pvorb/node-esc. There's a whole field of knowledge about this which you can yahoogle with "escape HTML". For now it might be enough to manually go through your code to replace less-than characters with < ..?
Note that the Syntax Highlighter library we're about to install offers another method other than using <pre> tags. That library also lets you put text inside <script> tags but I recommend against this because it doesn't degrade well. What if the JavaScript files we're about to install become unavailable? What if your reader's browser is configured to reject JavaScript? What..if..what..if..? Basically, if you just use <pre> tags with the CSS above and encode the text well, you'll have nice basic support for code snippets and no need to do anything else. The Syntax Highlighter library gives useful additional features, but if it becomes unavailable we can just delete the <script> tags referencing the library and still have working code snippets, albeit without syntax highlighting.
Now let's look at the Syntax Highlighter library. It's a self-contained fully featured JavaScript library for highlighting code snippets. The JavaScript executes in the browser, so we have to place the JavaScript files somewhere and add code to the template to reference the files.
The website has some installation instructions that I found less that useful. Here's the way I've installed it.
First, download the source from the github repository: https://github.com/alexgorbatchev/SyntaxHighlighter
As of this writing the source repository contains two directories of importance (the other directories can be ignored): scripts, styles
Those two directories must be uploaded to a web server so that we can add <script> and <link> tags to the template referencing the files. The <script> and <link> tags will bring in both the JavaScript library, and the CSS used by the library, to implement syntax highlighting.
In my case I have web server space I'm renting from a hosting company, and I simply set up a sub-domain over there to house the files. You can see the details by viewing the source code of this page - but I ask you to not use my copy of the files. The Syntax Highlighter author also is hosting the files on his own Amazon S3 account, but he says it's costing him quite a bit of bandwidth fees from an Amazon S3 account. I would avoid using his files because he might eventually tire of paying for this bandwidth cost. Blogger unfortunately doesn't let us upload files to be used by the theme.
In any case once you have the files somewhere (or even if you're referencing them off Alex Gorbatchev's site) add <script> and <link> tags to the section of your template.
The script tags start with this:
<script type="text/javascript" src="<URL leading to >/scripts/shCore.js"></script>
The bit marked "URL leading to" is the URL of the place you're storing the scripts and styles files. For every file in the scripts directory add a similar tag.
Next reference the style-sheets using a tag like this:
<link href="<URL leading to>/styles/shCore.css" rel="stylesheet" type="text/css" />
To make this clear, wherever you end up hosting the Syntax Highlighter library copy both the scripts and styles directories to that web hosting location. For every file in the styles directory add a similar tag.
There are enough JavaScript and CSS files in Syntax Highlighter that it's possible to trip across a bug in Internet Explorer where it silently fails if there are more than 30 or so style sheet files. The problem occurs with Internet Explorer 6 and hopefully that is a decreasing problem as the old WinXP machines get retired out of existence. In any case if you want to accommodate this problem an alternative solution is:-
<style type="text/css"> @import "<URL leading to>/styles/shCore.css"; // repeat once for each file in styles directory </style>
This way the impact is one style-sheet rather than the slew of them which come with Syntax Highlighter.
With these files set up we now use it by adding a class to the <pre> tags. The class added to a <pre> tag indicate which coding language is being used so that Syntax Highlighter can do its job. For example:
function foo() { }
I think the "brush:" part of the class is meant to invoke the idea of painting the syntax with the desired colors, while the part after the colon is a tag describing the brush to use. The list of brushes are on Alex Gorbatchev's website.