Sunday, October 21, 2007

Source code high-light in Blogger

I researched how to use source code high-light in Blogger. I found a way with google-code-prettify from here. This way runs on Javascript, so we don't need to install some engine to Blogger.

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:

Nuno Luciano said...

This is interesting.
I'll try this one!
Thanks

Pop said...

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.

Nuno Luciano said...

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

sunil said...

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

.NET Dev said...

See alternate approach for all blogs:

http://urenjoy.blogspot.com/2008/10/publish-source-code-in-blogger.html

Voffka said...

Thanks a lot.

Ben said...

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).

Maxim said...

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!

Term Papers said...

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