Javascript syntax highlighting on Blogger without external hosting

Using Alex Gorbatchev's Javascript syntax highlighter is very simple to use and useful for about any language, including Python but most recipes for integrating it in Blogger depend on access to an external location to host the Javascript files. In this article I show you how to integrate syntax highlighting into your Blogger page without the need to host anything externally.

Note: I only managed to get it to work for the old version (1.5.x) but as you can see on my blog that version is still eminently usable. As you will see there is no particular reason why the approach sketched below won't work for newer versions and I will look at it again but for now we'll make do with what works.

Step by step installation of the syntax highlighter in Blogger

  1. Download the package from Google Code
  2. Unpack the rar file
  3. Add a HTML/Javascript gadget to your Blogger layout (near the end of your page, e.g. in the footer)
  4. Copy the contents of the Javascript files you need to this gadget
  5. Add a extra line of Javascript to actually convert code fragments
  6. Copy the contents of the CSS stylesheet into Bloggers advanced CSS configuration
The rar file can be unpacked with most unzip tools, 7zip worked for me (on Windows). The minified Javascript files we need are in the Scripts folder. You need to copy the contents of at least the file shCore.js plus the contents of any file suitable for the languages you want to highlight in your blog. For this blog I copied shBrushPython.js to start.

The HTML/Javascript is available from Bloggers gadget menu when you click on a a 'add gadget' link. It allows you to insert arbitrary HTML and Javascript into your Blogger pages. If you add or edit the HTML/Javascript gadget it opens a simple text editor where you can insert the code. Make sure that you embed any code that you copy inside a pair of script tags. Add the contents of shCore.js first, followed by the contents of the other files. Finish with a line like dp.SyntaxHighlighter.HighlightAll('code');. The resulting contents need to look something like this: 

<script>
... contents of shCore.js ...
... contents of shBrushPython.js ...
dp.SyntaxHighlighter.HighlightAll('code');
</script>
Note that the HTML/Javascript gadget needs to be near the end of the page because any code you want to highlight should already be loaded once the HighlightAll() method is called. You can of course arrange to have this method called in an onLoad event, in which case you can probably choose to place the gadget anywhere.

The final step is to open Blogger's template editing page. Select Advanced from the left most column and then select Add CSS from the column next to it. This will open up a text editor where you can insert the contents from the file SyntaxHighlighter.css (it can be found in the Styles directory). Click Apply to Blog and you're done.

Labels: , , ,