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

Advertisements
This entry was posted in Uncategorized and tagged . Bookmark the permalink.

8 Responses to Source code high-light in Blogger

  1. Nuno Luciano says:

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

  2. Pop says:

    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.

  3. Nuno Luciano says:

    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

  4. sunil says:

    Good but how to make the publish post do we need to use the optionpublish as html or interpret as html.I need to use interpret as htmlwill it work even for this also..

  5. Voffka says:

    Thanks a lot.

  6. Ben says:

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

  7. Maxim says:

    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!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s