Blogger Syntax Highlighting w/ SyntaxHighlighter

Blogging code is a painful process if you decide to format your code manually in the HTML. Unfortunately, this is how I did my previous posts (for whatever idiotic reason). I decided it was time to grow up and use a syntax highlighter. It seems like SyntaxHighlighter by Alex Gorbatchev is the most popular way to integrate syntax highlighting into Blogger.

Adding Core SyntaxHighlighter Files

To use SyntaxHighlighter, you will first include the core resources in your blog's template to get it functioning.

Note: To see how to edit your blog template HTML, follow the instructions here: Edit the HTML of your blog's layout

Adding Brushes (Syntax Files)

SyntaxHighlighter uses CSS files to style the code according to its proper syntax. You can choose from an entire list of available brushes.

Initializing the JavaScript

Once all of the resources are included, you can now fire off the javascript that scans the DOM and highlights the code accordingly. This can be included in the <head>, but if it fails, try including it right above the </body> tag.

Very Basic Usage

As a quick example, let's say I want to show off some javascript code:

$(document).ready(function(){
  console.log('Hello World!');
  alert('Hello World, from an alert!');
});

In my Blogger post, I would put:

A more thorough explanation can be seen at the official website: http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html

Runtime Era

Wednesday, May 9, 2012