How use Prettify in new Blogger Dynamic Views

I've started to use Blogger. First thing I've wanted to use in my posts a SyntaxHighlighter.
I've chosen google-code-prettify.
It is easy to setup, Google uses it, and it works very well.

You can find instructions here.

  • Go to the blogger dashboard, then click Template link present on the left-hand-side list
  • click on Edit HTML button.
  • Edit HTML dialog box will appear.
  • Put the following tags in <head> tag section of HTML template.
      <link 
       href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" 
        type="text/css" 
        rel="stylesheet"/>
      <script type="text/javascript" 
       src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js">
      </script> 
      
  • Edit the <body> tag and it should look like as shown below.
     
      <body onload="prettyPrint()"  ... >
     
  • Once you are done, just save the template.

Note that is not working with Dynamic Views, because posts are loaded asynchronously. So still you need to add the following in your posts:
<script>prettyPrint()</script>

Usage
  • In your post/blog surround your code with <pre> or <code> tags. as shown below.
      <pre class="prettyprint">...</pre>
                 or 
     <code class="prettyprint">...</code> 
     

Popular posts from this blog

Expand and collapse animation

Android-5: Card and images with rounded corners in Android 4

NotificationListenerService and kitkat