Using SyntaxHighter on Blogger

Be warned, this blog post has not aged well. It may contain information that is outdated or no longer relevant.

SyntaxHighlighter is a great little add-on that automatically formats your code snippets for you. And it’s all client-side JavaScript, making it easy to turn this:

public static string Foo() { return “bar”; }

Into this:

public static string Foo() {
    return "bar"; 
}

Update: Yeah, that’s not SyntaxHighlighter. I now use PrismJS for all my code snippets. You may want to consider doing the same, as this guide is very old.

Highly recommended for anyone with a coding blog. The rest of this post is a quick installation guide to getting SyntaxHighlighter running on Blogger.

Get Your Files In Place

First, download SyntaxHighlighter. You’ll need to host some of the included files somewhere for your blog pages to reference. If you don’t have a place to upload them to, check out the free hosting graciously provided by the creator.

Now open up the zip file you just downloaded and find these files:

  • /styles/shCore.css
  • /styles/shThemeDefault.css
  • /scripts/shCore.js

Additionally, look in /scripts for any brush files that match languages you’ll be using in your code snippets, as referenced here.

Upload these files to your host.

Edit Your Blogger Template HTML

Now sign into Blogger, go to your dashboard, click the “Design” link for your blog, then “Edit HTML”. Search your template HTML for </head> and add this right before it:

<link href='http://whatever.com/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://whatever.com/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://whatever.com/shCore.js' type='text/javascript'></script>
<script src='http://whatever.com/shBrushCSharp.js' type='text/javascript'></script>
<script type='text/javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

Replace “http://whatever.com” with the correct path to the files you uploaded. Notice on line 4 I’m adding the C# brush, but you can add any other brush(es) there instead.

Now save the template changes, and you’re good to go!

Using SyntaxHighlighter

Next time you make a post, just wrap your code snippets in this:

<pre class="brush: c#">
    ...
</pre>

Don’t forget to switch out “c#” for whatever language is in your code snippet.

So now I’ve told you everything you need to get up and running. Next time, I’ll talk about some of the ways to customize SyntaxHighlighter.

Update: And here it is, customizing SyntaxHighlighter.

Hey, you reached the end!

Feel free to check out my other blog posts or subscribe to my RSS feed. You can also click a tag below to see related blog posts.