Testing Online Code Syntax Highlighters for Blogs (3): google-code-prettify

Here's another online code syntax highlighter called google-code-prettify.
The following are the test results.
In order to use this technology in your post, the following simple steps will do.

1. Add an "HTML/JavaScript" gadget to your blog. In the contents, just paste the following line of code found on the official tutorial. [1]

   <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
   

2. Insert the following lines of code and replace the text inside the pre tag with your code.
   Note: Like SyntaxHighlighter and highlight.js, you need to encode <, >, &, etc into HTML encoding using an HTML encoder. At the bottom part of one of my older posts, I included a link to an HTML encoder, and here's a list of two more.
   • Web 2.0 Generators: it contains a list of reserved characters and their entity names, as well as an HTML decoder.
   • OpinionatedGeek: it contains an HTML decoder.
   i.e. If you want to embed HTML code using an HTML encoder, you need to type the following unencoded code first.

   <pre class="prettyprint lang-html">
   <!-- your code here-->
   </pre>
   

   Then you use a HTML encoder to generate the following output and paste it inside the pre tag

   <pre class="prettyprint lang-html">
   <!-- your code here-->
   </pre>
   

   Exercise: If you think that you understand the above text, try making a web page that teaches users how to embed HTML code into a web page.
   Hint: Right click and choose "View Page Source" in the pop up menu.
3. If your source code contains too many characters in a line, the right part of the code will go out of the box. Add the following CSS code to automatically fix the problem.

   pre {
    overflow: auto;
   }
   

   Then a scrollbar will be automatically attached to the source code container if the source code has too many columns and/or lines.

Suppose you see the following lines of code in message in response to a question on Stack Overflow. However, it has no line number, and you want to embed this piece of code into your web page with line number. So I append linenums to the class attribute of the pre tag.

<select>

<?php for ($i = 1; $i <= 2; ++$i) { ?>

  <optgroup label="<?php echo date('l j F', strtotime('+ ' . $i . ' day')); ?>">
    <?php if($i==0) { ?>
    <?php for ($n = date('H'); $n < 16; $n += 3) { ?>
      <option><?php echo str_pad($n, 2, '0', STR_PAD_LEFT); ?>:00 - <?php echo str_pad($n + 2, 2, '0'); ?>:00</option>
    <?php } }?> 
    <?php for ($n = 9; $n < 16; $n = $n + 3) { ?>

      <option><?php echo str_pad($n, 2, '0', STR_PAD_LEFT); ?>:00 - <?php echo str_pad($n + 2, 2, '0'); ?>:00</option>

    <?php } ?>

  </optgroup>

<?php } ?>

</select>

For further details, refer to the official README.

Reference:
[1]: http://andmobiz.blogspot.hk/2013/05/blogger-google-code-prettify-github-gist.html