Download google-code-prettify
Donwload the archive file from here. After that, fetch both of JS file and CSS file from the archive.
Embed the content of files
You may embed source code of these files, but it's easy to use HTML/JavaScript widget. Embed source code with comment & script tag as the following:
<script type="text/javascript"><!--
// Paste prettify.js code here!! //
--></script>
<style type="text/css">
// Paste prettify.css code here!! //
</style>
Edit your template
To reflect this change to your blog, edit your template as the following:
- <body>
+ <body onload='prettyPrint()'>
In a summary, activate the Javascript in body of your blog.
How to use?
Write your code within <pre class="prettyprint"></pre>.
Conclusion
This way is very good for us, but you may go to trouble when you use a HTML tag, because such descriptions is handled as natural HTML tags. Therefore, when we use "inequality sign", we may go to trouble, too.
Anyway we can't write souce code in blogger, as well as bbcode. Therefore, "better than nothing". Do try it. ;)
9 comments:
This is interesting.
I'll try this one!
Thanks
This post helped me a lot.
I try to find another way to embed the code, so i found, like this
<head>
...
<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'/>
...
</head>
hope this's another choice for embed the code, anyway, Thank a lot for this post.
After edit the default template I didn't check it and that i had lost "prettify" implementation.
After add these two lines of code i extend prettify pref-formated text as follow:
<pre class="prettyprint" style="overflow:auto">
..,
</pre>
This resolves issues of code line not being break on Firefox and Opera.
The overflow set to auto will render nice on different browsers: FF2, IE7, Opera9, Safari3
Good but how to make the publish post do we need to use the option
publish as html or interpret as html.
I need to use interpret as html
will it work even for this also..
See alternate approach for all blogs:
http://urenjoy.blogspot.com/2008/10/publish-source-code-in-blogger.html
Thanks a lot.
Thanks, that helped a lot.
Note that I don't think the idea of linking directly to the prettify repository is very ethical (as per commenter Pop).
Thanks for the write-up; I have successfully tried it. However, I am proposing to modify the procedure slightly by using Blogger's layout editor and "window.onload" method (details here); this makes for code that survives changing of a blog's layout and does not require modifying the "body" tag.
Thanks again!
I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards
Post a Comment