(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"
Thanks...I'll try this method.
ReplyDelete:)
After doing quite a bit of research on this, I find your method the be the simplest, and it looks good too!
ReplyDeleteThanks!
BTW, Here's a link to how I utilized your code!
Hey Vivian,
ReplyDeleteThank you for your prettyprint solution, I love it a lot.
Come and see the results on my PHP blog.
Cheers,
Michelangelo
Thanks for posting this. Seems to work great.
ReplyDeleteThanks.. came to my rescue while posting my first blog blog
ReplyDeleteis there any downside when I strip the < and > from the source using notepad? my codes shows as it should at my blog
ReplyDeletethanks
Great post. It works.
ReplyDeleteThanks for sharing! Could you please explain more about "save them in your google page"? I was stuck at that step. Thanks!
ReplyDeleteDevelopers 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
ReplyDeleteHey Nice Blog!! Thanks For Sharing!!!Wonderful blog & good post.Its really helpful for me, waiting for a more new post. Keep Blogging!
ReplyDeletebest java training in coimbatore
php training in coimbatore
best php training institutes in coimbatore
I just do this with plugin installed in my wordpress. The Plugin is Crayon Syntax Highlighter.
ReplyDeleteDigital Marketing Training institute in Coimbatore
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