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"

12 comments:

  1. 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
  2. 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
  3. Thanks for posting this. Seems to work great.

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

    ReplyDelete
  5. 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
  6. Thanks for sharing! Could you please explain more about "save them in your google page"? I was stuck at that step. Thanks!

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

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

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

    ReplyDelete