The proper way to use Syntax Highlighter with Blogger

I wanted to integrate SyntaxHighlighter (http://alexgorbatchev.com/SyntaxHighlighter/) with my Blogger. In version 3.0 the author introduced feature autoLoader (http://alexgorbatchev.com/SyntaxHighlighter/manual/api/autoloader.html) which loads only those scripts that are actually required.

I wanted to add support for every language supported by this highlighter.

Initially this didn't work because the autoLoader script was executed prior to DOM loaded so it decided that there are no syntaxes to load. To fix that I am using jQuery.

The following instruction is mostly copy-pasted from http://www.commonitman.com/2010/09/how-to-use-syntax-highlighter-3-in.html

1. Navigate to Dashboard > Design > Edit HTML
2. Backup the current template by clicking on the link Download Full Template
3. In the textarea, press CTRL+F to find the code </head>
4. Copy the below code and paste it just above

5. Preview your changes and make modifications as required
6. Save the template