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> 
     

Comments

Popular posts from this blog

AntiPattern: freezing a UI with Broadcast Receiver

How to centralize the support libraries dependencies in gradle

NotificationListenerService and kitkat