Adding Syntax Highlighting to Blogger

I’ve switched back to Blogger from Posterous after so many failed attempts in trying to get the latters markdown syntax to display correctly. I still write my posts using markdown syntax in Byword, but then I display it in a full-formatted HTML syntax (Alt + Command + P) and click the “Copy to HTML” which I paste into Blogger.

One of the things I wanted on my blog was improved visual display of code (i.e. CSS, Coldfusion) or commands (i.e. bash) and I found the SyntaxHighlighter project. This project can be added to any website, including a Blogger template (except for the dynamic ones right now).

I found a number of references on how to add this to Blogger, but many were from a year or more ago (which is decades in Internet time). So here’s a quick guide on how you can add the SyntaxHighlighter project to Blogger.
Note: I’m using the new Blogger interface

1. Login to your Blogger account
2. Click on Template
3. Click on the “Edit HTML” button under the “Live on Blog” thumbnail
4. Click the “Proceed” button to the message warning you about editing the code
5. Search for the text </head>
6. Paste the following code

   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'>
   <link href=’http://alexgorbatchev.com/pub/sh/current/styles/shCore.css’ rel=’stylesheet’ type=’text/css’/>
   <link href=’http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css’ rel=’stylesheet’ type=’text/css’/>
   <script src=’http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js’ type=’text/javascript’>
   <script src=’http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js’ type=’text/javascript’>
   <script src=’http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js’ type=’text/javascript’>
   <script src=’http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js’ type=’text/javascript’>
   <script src=’http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js’ type=’text/javascript’>
   <script src=’http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js’ type=’text/javascript’>
   <script src=’http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js’ type=’text/javascript’>
   <script language=’javascript’> 
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.config.tagName = “pre”;
   SyntaxHighlighter.defaults.toolbar = false;
   SyntaxHighlighter.all();
     

7. Click the “Save Template” button
8. Click the “Close” button

Now let me explain a little of this to you.
The first line is loading the core Javascript file for the SyntaxHighlighter project, this is required.

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'> 

The second line is loading the core CSS file for the SyntaxHighlighter project, this is also required.

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>

The third line is loading the display theme to be used. If you don’t like this particular theme, there are others you can choose from, see the list here.

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

Lines 4 through 10 are particular “brushes” that I want to load. A brush is specific for the language syntax you want to display. Here I’m loading brushes for Bash scripts, ColdFusion, CSS, JavaScript, SQL, XML (which includes HTML) and plain text. You must load at least one brush, but you can have as many as you want. You can find a list of the different language syntax brushes here.

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'>
<script src=’http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js’ type=’text/javascript’>
<script src=’http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js’ type=’text/javascript’>
<script src=’http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js’ type=’text/javascript’>
<script src=’http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js’ type=’text/javascript’>
<script src=’http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js’ type=’text/javascript’>
<script src=’http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js’ type=’text/javascript’>

Line 12 is required for the SyntaxHighlight project to work with Blogger.

SyntaxHighlighter.config.bloggerMode = true;

Line 13 is designating the <pre> tag as what will define the code block to have the brush applied to.

SyntaxHighlighter.config.tagName = "pre";

Line 14 disables the toolbar from displaying when the SyntaxHighlighter is applied. This seems to just be a “?” that’s displayed that the user can click on to see the name of the project. From what I can tell this is deprecated from previous versions so I disable it.

SyntaxHighlighter.defaults.toolbar = false;

Line 15 runs the SyntaxHighlighter code

SyntaxHighlighter.all();