Blogger SyntaxHighlighter doesn't work at all

For dynamic views, the post's content seems to be loaded after the script that bootstraps the syntax highlight process. You can work around it:

<pre class="brush: js" title="test" id="sh3-123">
var f = function () {
    return 1;
};
</pre>

<script type="text/javascript">
// code snippet is loaded here, use SH3 API to highlight it
var element = document.getElementById('sh3-123');
SyntaxHighlighter.highlight(undefined, element);
</script>

I had the same problem. The instructions to set up SyntaxHighlighter seemed easy enough. And all tutorials were more or less comparable including the comment "on my blog it works, if it doesn't work for you then you must be doing something wrong". Nothing worked for me, I got no highlighting.

The solution was to switch to another Blogger template. It just didn't work with the dynamic template I chose. Switching to a simple template did the trick. Highlighting now works.

By the way: While chasing for errors I also tried Prettify as an alternative. It also didn't work. Seems like the dynamic template did something which caused both syntax highlighters to fail.


Post your snippets at gisthub and embed like youtube video (copy HTML embedding code

enter image description here

and paste into your post). Voila! (image courtesy http://www.restlessprogrammer.com/2013/02/adding-code-snippets-to-your-blog.html)