Tuesday, May 12, 2009

How to post source code in blogspot.com

when I tried to publish a post in which I can show code snippets, I encountered some difficulties:
(1)Pieces between arrow brackets can not be displayed because in such a case Blogger will try to automatically corrected the HTML code by closing all tags such as an C++ library import<iostream>.
(2)There is neither line indent nor highlight. The code is ugly and hard to read.
So, how to display source code in a good manner? I did some research online. Here are the steps I followed to give the source code a "makeup":

Step 1: Edit the html template
(Layout->Edit HTML)
Edit Use google-code-prettify,a Javascript module and CSS file, to allow syntax highlighting of source code snippets in an html page.
There are many other modules which can do the same job, such as SyntaxHighlighter (You can save them in your google page)
(1) Backup the current template.
(2) Add code to "head" tag.
In the "head" tag, link to the Javascript and CSS files in google prettify code
<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"/>

(3)Customize the "pre" tag
pre {
margin: 5px 20px;
border: 1px dashed #666;
padding: 5px;
background: #f8f8f8;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */

(4)Add onload="prettyPrint()" to your document's body tag
- <body>
+ <body onload='prettyPrint()'>

(4)Save the new template.

Step 2: Format the code
(1) Download WebCodeFormatter which is a small Java app which replaces all the critical characters in your code with the appropriate unicode notations which is safer.
(2) Convert the source code and then copy it to your blog post.
(3) Write your code within
<pre class="prettyprint">
source code

1. "How to publish source code in Blogger.com"
2."Posting source code on Blogger"


  1. After doing quite a bit of research on this, I find your method the be the simplest, and it looks good too!


    BTW, Here's a link to how I utilized your code!

  2. What a great idea! I can't wait to read some new blogs! I just submitted my faves. :)
    web development professional development

  3. Hey Vivian,

    Thank you for your prettyprint solution, I love it a lot.

    Come and see the results on my PHP blog.



  4. Thanks for posting this. Seems to work great.

  5. Thanks.. came to my rescue while posting my first blog blog

  6. is there any downside when I strip the < and > from the source using notepad? my codes shows as it should at my blog

  7. This is a nice article..
    Its very easy to understand ..
    And this article is using to learn something about it..

    c#, dot.net, php tutorial

    Thanks a lot..!

  8. I have no words for this great post such a awe-some information i got gathered. Thanks to Author.
    flash to html5 converter

  9. Thanks for sharing! Could you please explain more about "save them in your google page"? I was stuck at that step. Thanks!

  10. Developers are still interested in Android and iOS platforms In 2013 several new products were launched including Kindle, iPad mini, iPhone 5 and Samsung galaxy S III. All these products were very. tech blog

  11. Thank you for sharing this article, it is very easy to understand and informative. Excellent!

    web Development Melbourne

  12. Hey Nice Blog!! Thanks For Sharing!!!Wonderful blog & good post.Its really helpful for me, waiting for a more new post. Keep Blogging!
    best java training in coimbatore
    php training in coimbatore
    best php training institutes in coimbatore

  13. I just do this with plugin installed in my wordpress. The Plugin is Crayon Syntax Highlighter.
    Digital Marketing Training institute in Coimbatore

  14. TCA, being an online setup, resolves this concern of such aspirants and plays a critical role in saving time, money and energy costs of the aspirants.We are proud to win the trust of hundreds of students with our effectual strategies and powerful mechanism. You can come and join us as TCA Online is surely your gateway to bureaucracy.whatsapp call for
    more info +923133319144


    Online CSS Academy,

    Online CSS Institute,

    Online CSS Preparation,

    Best CSS Academy,

    Best Online CSS Academy in Pakistan,

    Best CSS Academy in Pakistan,

    Best CSS Academy in Islamabad,

    Best CSS Academy in Lahore,

    Best CSS Academy in Karachi,

    Best CSS Academy in Peshawar,

    GK MCQs

  15. Thank you for sharing this informative post. looking forward to read more.
    Web Design and Development Company

  16. A radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point. Learn how to create Radar Chart Google Sheets