Installing Syntax Highlighter on Blogpost

public static void hola() {
    System.out.println("Hola, ¿cómo estás?");
}

Well the above Java code shows it - I got Syntax Highlighter working on my blog. For those of you who don't know, it's the JavaScript library that formats and highlights the Java syntax above making it all nice and easy for you to read. It supports most popular programming languages. There are already a tonne of articles already out there on how to install Syntax Highlighter so I'm kind of reinventing the wheel but below is an outline of the steps and ways I resolved some issues while installing it.

Getting Syntax Highlighter Running on Blogspot/Blogger.com

1. Go and download Alex's Syntax Highlighter (SH) from here and unzip it once you've got it. Latest version was 3.0.83 at the time I wrote this article. You'll have a directory hierarchy something like:
   
2. You need somewhere to save the SH's JS and CSS files on the web seeing as Blogspot doesn't allow you to upload files (or at least not as far as I could figure out). If you don't have a website or server to host them on then sign up for a free site at Google Sites.
1. After signing up/logging on, go Create button -> enter details such as name and address of your site -> Create button
2. New page button (top-right icon) -> enter name of folder (page) to store SH files, e.g. "sh" -> Create -> Save. You'll then have a location something like http://sites.google.com/sites/<your site name>/sh
3. Manage site -> Attachments -> Upload button -> Choose file, select different location, choose page created in step 2 -> Upload.
   * Files to upload are talked about below so read the rest of the steps before uploading.
3. Now login to your Blogspot dashboard/admin page (http://www.blogger.com/home) and assuming you're using the new interface (as I am as of 30th Nov 2011):
1. Open top-right  options menu (beside goto post list icon ) -> Template -> Edit HTML button for the template you current use (under the old interface it's Design -> Edit HTML)
2. Add the following code directly above the </head> tag. I am using the "Simple" template by the way. Read more below for what edits you will need to do before saving.

<link href="http://sites.google.com/site/arohacorp/sh/shCore.css" rel="stylesheet" type="text/css"/>
<link href="http://sites.google.com/site/arohacorp/sh/shThemeDefault.css" rel="stylesheet" type="text/css"/>
<link href="http://sites.google.com/site/arohacorp/sh/shCoreEmacs.css" rel="stylesheet" type="text/css"/>
<link href="http://sites.google.com/site/arohacorp/sh/shThemeEmacs.css" rel="stylesheet" type="text/css"/>
 
<script src="http://sites.google.com/site/arohacorp/sh/shCore.js" type="text/javascript">
</script>
<script src="http://sites.google.com/site/arohacorp/sh/shAutoloader.js" type="text/javascript">
</script>
<script src="http://sites.google.com/site/arohacorp/sh/shBrushJava.js" type="text/javascript">
</script>
<script src="http://sites.google.com/site/arohacorp/sh/shBrushPhp.js" type="text/javascript">
</script>
<script src="http://sites.google.com/site/arohacorp/sh/shBrushPerl.js" type="text/javascript">
</script>
<script src="http://sites.google.com/site/arohacorp/sh/shBrushCpp.js" type="text/javascript">
</script>
<script src="http://sites.google.com/site/arohacorp/sh/shBrushBash.js" type="text/javascript">
</script>
<script src="http://sites.google.com/site/arohacorp/sh/shBrushJScript.js" type="text/javascript">
</script>
<script src="http://sites.google.com/site/arohacorp/sh/shBrushCss.js" type="text/javascript">
</script>
<script src="http://sites.google.com/site/arohacorp/sh/shBrushXml.js" type="text/javascript">
</script>
<script src="http://sites.google.com/site/arohacorp/sh/shBrushSql.js" type="text/javascript">
</script>
 
<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

3. I have included a few extra files (more than the minimum required) to support an Emacs theme and syntax highlighting for a variety of programming languages). Below is a detailed description of the files and their purpose. Read over that.
4. Once you've decided what files you will require, upload them to the sh folder you created on Google Sites and then modify the appropriate URLs inside the code you will add to your blog's template.
4. Now SH should be all setup nicely on your blog, here's what you need to do to actually utilise it.
1. Create a new post
2. Open the "Edit HTML" box, and to enter your code copy/paste it between the <pre> and </pre> tags. For example the following code:
   
   <pre class="brush: java">
   
   class Foo {
       Foo() {
           System.out.println("Hello, world");
       }
   }
   </pre>
   
   results in formatted code like:

   class Foo {
       Foo() {
           System.out.println("Hello, world");
       }
   }
   

   A few things to note:
   • You replace the "java" with whatever language you're copy/pasting; js, html etc. Make sure you have the corresponding brush JS file installed (see below).
   • The HTML editor may give you errors saying your tags are not closed if you enter something like <link .../>. It will accept <link ...></link> and may even convert it to the former after you save it.
   • Using <pre>...</pre> tags means that right angle brackets (< and >) in your code will need to be HTML escaped, i.e. be entered > as &gt; and < as &lt;. The solution to that is <script>...</script> tags but these break RSS feeds so pre is considered better for blogs. The trick for using pre is not to directly copy/paste any code that will have right angle brackets in it, but run it through this Postable utility which will automatically convert them for you (Note; as of 2011/12/01 I noticed that this script was deleting + characters in my Java code. I've contacted the creator with the bug and have since resorted to manual search-n-replace in Notepad++ for < and >). More info here.
   • The old flash plugin of yonder days of SH used for copying and printing the contents has been done away with. Now to select all code inside a SH formatted box, just double-click a blank area inside it, all text will be selected then Ctrl+C / Edit->Copy.

Syntax Highlighter files

Warning: Do not use the files inside the src folder. You only need worry about the scripts and styles folders in the SH zip file. I was using shCore.js from here and getting lots of XRegExp not found errors when loading my blog.

At a minimum you will need to install (i.e. upload to Google Sites and link from your template's HTML code) shCore.css and shThemeDefault.css from the styles folder. From the scripts folder you will need shCore.js and at least one brush file for highlighting the syntax of a language (for e.g. JavaScript). The code would look like:

<link href="http://sites.google.com/site/arohacorp/sh/shCore.css" rel="stylesheet" type="text/css"/>
<link href="http://sites.google.com/site/arohacorp/sh/shThemeDefault.css" rel="stylesheet" type="text/css"/>
 
<script src="http://sites.google.com/site/arohacorp/sh/shCore.js" type="text/javascript">
</script>
<script src="http://sites.google.com/site/arohacorp/sh/shBrushJScript.js" type="text/javascript">
</script>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

If you want to highlight pure HTML then you can use the Xml brush script and enter "html" as the brush class in the pre tag. Add other languages as you require them.

That's all. I pieced together this tutorial from memory and half re-doing things as I wrote after I first spent a few hours trying to get it all running. If you find some mistake in this article please let me know.