Wednesday, August 8, 2012

SyntaxHighligter in new Blogger Dynamic Views - and then Prettify

So, I've started to use Blogger... again.

And first thing I've wanted to enrich my posts with was SyntaxHighlighter.

There are tons of guides out there, but most of them do not work with the new Blogger templates. Other provide instructions that I find unnecessarily complicate. So here is how.

In your blog settings, go to "Template" and click "Edit HTML". In the pop-up, find the <head> and paste the following:

<!--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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' 
                                        type='text/javascript'/>
<script type='text/javascript'>
highlight = function() {
  SyntaxHighlighter.highlight()
}
</script>
<!--SYNTAX HIGHLIGHTER ENDS-->

Now, when writing new post, switch to HTML, and paste the following line at the end:

<script>highlight()</script>

You'll have to put this line at the end of each post you want to highlight.

Update

After a while I've switched to google-code-prettify. Its much easier to set up and looks like a more modern project.

Setup instructions are here. The only note is that <body onload="prettyPrint()"> is not working with Dynamic Views, because posts are loaded asynchronously. So still you need to add the following:

<script>prettyPrint()</script>