Adding syntax highlighter to blogger platform using google sites

Most, if not all, programming blogs contains syntax highlighter (sometimes called syntax colorizer) to distinguish normal text from computer code and thus making blog more readable. Using just HTML you can use pre tag or differently styled paragraph to insert same-width font, like lucida console. There is also a nice online free tool that does syntax highlighting using only styled HTML tags.

How about using pre-made CSS/JavaScript combination that automatically highlight code in your blog? All what you have to do is to surround programming code with certain tag and choose language for highlighting. This tutorial will show you how to use Google's syntax highlighter on Blogger platform, while hosting syntax highlighter project on Google Sites service.

When I started writing this blog, I used Google's syntax highlighter tool for code highlighting. Procedure was fairly simple. You need to add few lines in the Blogger's template (Design > Edit HTML > Edit Template).

Before the end of head tag (before </head>), insert the following lines to include the code highlighting to your blog:

<!--SYNTAX HIGHLIGHTER BEGINS-->
<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/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

Unfortunately, this method relies on css and js files that are hosted on alexgorbatchev.com and sometimes this site go offline, resulting highlighter to stop working.

Just a quick summary of the situation:
Alexander Gorbatchev is the author of syntax highlighter and his code was hosted on Google code. For some reason, author decided to continue working on project on another host. His site provides always up-to-date version of highlighter, plus it provides hosting for his highlighter scripts, so everyone can link to them! However, when his site goes offline, so goes your code highlighting. After all, author pays hosting from his own pocket, so either donate (he definitely deserves it) or host it on your host.
Blogger don't allow you to upload any file on their services, so you must use other hosting services. Since Blooger is owned by Google, you can use their "Google Sites", with same account, to upload required files. Here is how to do that:
First, download highlighter from Gorbatchev's site and extract it somewhere on your computer. You can always checkout newest snapshot of code from his project's githuh svn, but I recommend using stable version on his site.

Now go to Google Sites and create a site. Use your Google account credentials to log in. Now go to More Actions > Manage site.

To upload a file, go to "Attachments" then click on the "upload" button. In a dialog, click "Choose File" to select file from local computer and click on "Upload" button. Make sure that "Upload attachment to / (top level)" is selected.

Let see what syntaxhighligher contains. Important folder are styles and scripts. Styles contains CSS files that defines theme for syntax highlighter (check out project page on themes). Every theme is contained in one css file (like shThemeDefault.css). All theme files are also dependent on shCore.css. Keep in mind that you can upload as many themes as you want, but you can use only one at a time on Blogger.

Script folder contains JavaScript files that defines brushes for each programming language that you wish to be highlighted. All brushes are dependent on shCore.js. This Project page contains the list of scripts that you need to include for each language. You can have as many languages as you want. For example: I want Java, XML, plain text, HTML and C# highlighting, so I need to upload: shCore.js, shBrushJava.js, shBrushXml.js, shBrushPlain.js and shBrushCpp.js.
Upload styles and scripts that you wish to have. You don't need to worry about folder structure. Also don't forget to upload shCore.css and shCore.js as they are mandatory requirement.

Now, go back to your Blogger's Edit template page to add links to your uploaded files. First you need to know how to form a link to uploaded files on Google Sites. Go to Attachments page on Google Sites once again and right-click on "Download" button and select option that copies link address or location (on Google Chrome, it is called "Copy Link Address").

Now paste link in your text editor (gedit, komodo, notepad...) and remove text after '?' sign, including '?' sign. At the end, you should get something like this which is a valid link which can be used in Blooger:

https://sites.google.com/site/[YOURSITENAME]/shBrushCpp.js

To test it, you can paste this link in browser and if it starts download of given file, then you are on the right track.
Modify your Blooger template (remember, insert before </head>) to link to highlighter located on your Google Sites. Make sure you add content of script tag at the end of listing that will start syntax highlighter. Also, be sure that shCore.js is loaded, before any other brush. 

<!-- CSS Theme -->
  <link href='https://sites.google.com/site/[YOURSITENAME]/shCore.css' rel='stylesheet' type='text/css'/>
  <link href='https://sites.google.com/site/[YOURSITENAME]/shThemeEmacs.css' rel='stylesheet' type='text/css'/>
  <!-- Code Highlighting scripts -->
<script src='https://sites.google.com/site/[YOURSITENAME]/shCore.js' type='text/javascript'/>
<script src='https://sites.google.com/site/[YOURSITENAME]/shBrushXml.js' type='text/javascript'/>
<script src='https://sites.google.com/site/[YOURSITENAME]/shBrushPlain.js' type='text/javascript'/>
<script src='https://sites.google.com/site/[YOURSITENAME]/shBrushJava.js' type='text/javascript'/>
<script src='https://sites.google.com/site/[YOURSITENAME]/shBrushCpp.js' type='text/javascript'/>
  <!-- Script that starts highlighter -->
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

Now that you have highlighter available, let me give you a quick info how to use it.
You will need to "Edit HTML" directly (not in composer). Go to position where you want code inserted and open pre tag and add class attribute with value brush:<language_name>. Language list is here and you must have required JavaScript files linked and hosted on your Google Sites. Given example shows some advanced Java code in syntax highlighting.

<pre class="brush:java">
for (int i=0; i &lt; 100; i++)
     System.out.println(&quot;glamHACKER rulez!&quot;);
</pre>

Keep in mind that you are inserting HTML code so you need to escape (replace) all forbidden characters (like <, > and &) in your code to get valid HTML. There is a great online tool Quick Escape that does this nicely.
Consult Gorbachev's site for really detailed info on syntax highlighter settings and more installation methods.

Now that you have syntax highlighter available on your blog, nothing stops you from posting code online. Off to more concrete programming. :)