2013年6月30日 星期日

Testing display the code nicely via Google Code Prettify

Here is the result:

int sum=0;  
for(int i=0;i<10;i++){
  sum+=i;
} 
System.out.println("total:"+sum);


What I did basically was according to stackoverflow: How to use prettify with blogger/blogspot?  I took the solution provided by SK9 because it looked simpler.

However, since the posts was three years ago, now the Blogger setting UI is slightly different, let me post my steps here.

Step1:Login blogger with your account, select 'Template', and click on 'Edit HTML' button.




Step2:
Copy the following two lines to the block inside <head></head>, and add onload='prettyPrint()' in <body> tag.




Step3: When post an article, switch to 'HTML' mode, and wrapper your code with <pre class="prettyprint"> and </pre>, you will see the effect!




Nevertheless, looks like wordpress has this function as built-in, and the appearance is quite decent and clear.

(btw, I have also found another tutorial in Chinese: 
http://blog.cookys.net/2012/10/blogger-google-code-prettify.html, the article was not too long ago)