August 29, 2013

Using Prettify with Blogger.com

I tried to configure Blogger using Prettify.js and struggled a bit as it did not work as I expected.
I looked at one of my favorite knowledge sources and saw that using syntax highlighting in Blogger.com should be quite simple.

So, I started to follow the advices given at Stackoverflow.com and added/modified the following lines in the HTML of Devbutze.

<head>
    <link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"/>
    <script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"></script>
...
</head>
<body onload="prettyPrint()">
...
</body>

It is worth notice - as mentioned also at Stackoverflow - that after correct configuration the to-be-highlighted code won't be colored while previewing. But even when I published my very, very first test post there was still that poor black and white code. WTF?

After some trials I discovered that the necessary correct execution of prettyPrint() failed for some reason at least in Chrome. With FF I had no problems and it worked like expected.
The solution, without talking too much, is very simple. Initially, I used the 'Dynamic' Template for the blog. When I changed to 'Simple' Template it worked like a charm. Well, that is not really a solution, but as I don't like the Dynamic Template that much, it serves as a solution at least for me.

No comments:

Post a Comment