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
</pre>


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

13 comments:

  1. Thanks...I'll try this method.
    :)

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

    Thanks!

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

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

    ReplyDelete
  4. Hey Vivian,

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

    Come and see the results on my PHP blog.

    Cheers,

    Michelangelo

    ReplyDelete
  5. Thanks for posting this. Seems to work great.

    ReplyDelete
  6. Thanks.. came to my rescue while posting my first blog blog

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

    ReplyDelete
  8. 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..!

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

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

    ReplyDelete
  11. 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

    ReplyDelete