Pages

Thursday, August 21, 2008

How To Post Code Snippets in Blogger Post

This issue haunting me for almost 2 years now (yup that long). I never properly research how it can be done before, not until last night. I have to enable this feature due to several factors where I need to post any sample snippet code directly to the blog post. However you need some tag into HMTL special character first.

As you notice (check for the blogger template tag), I start posting Blogger template for Blogger user. I did it because I want to channel out my art inspiration that clogging my mind. Anyway I thought maybe I could post the whole template (XML file) in the respective post. Later on I found that, Blogger just won't let you post some specific tag like <html> or <head> or <title> no matter what. So what is the point if it doesn't solve the issues? Read on...

Most people would say that using the <pre> would solve it. But I found a much better way to present your snippet code in your blog post. It is called SyntaxHighlighter. It quite easy to set up if you have your own domain as it requires some include files like css and javascript for coding syntax brushes where you can get it from the same website. No worries I'll show you how to deal with this. Read the step bellow:

1) Upload the SyntaxHighlighter files to your server.
2) Include the SyntaxHighlighter.css file at the top of your page, inside the head tag.

<link type="text/css" rel="stylesheet" href="SyntaxHighlighter.css">


3) At the bottom of the page, just before the end body tag, include the brushes and other js files you will need, as well as the function call to stylize the <pre> tags:
<script language="javascript" src="shCore.js"></script>
<script language="javascript" src="shBrushCSharp.js"></script>
<script language="javascript" src="shBrushXml.js"></script>
<script language="javascript" src="shBrushPython.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = 'clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>


4) Now you can start using it by placing your snippet code in between these two <pre> tags that the javascript will stylize
<pre name="code" class="html">
<!-- code here -->
</pre>
<pre name="code" class="python">
# code here
</pre>


As you can see above, the result is much better.

Note:

You might find extra <br> tag in the posted code. This is due to the Blogger setting. By the dafault Blogger will automatically add <br> tag for each new line. There are to ways to fix this issue:
  1. You can disable this Blogger feature at Settings > Formatting > and set the Convert line breaks to 'No'. However from here onward, each of your blog posting will be one liner. Yup, no matter how many new line you made, your blog entry output will be in one line.
  2. Another method is to fix the SyntaxHighlighter by adding this specific script. Go to this line (at the step 3 above)
    <script language="javascript">
    dp.SyntaxHighlighter.ClipboardSwf = 'clipboard.swf';
    dp.SyntaxHighlighter.HighlightAll('code');
    </script>
    

    Well ditch that that part and add this one.
    
    

    Thanks to Hongjun for that fix.

9 comments:

WSW said...

Thanks for posting such a detailed article Azo.
BUt I was rather looking for something simpler and I found this,

http://www.blogpandit.com/2009/05/add-code-snippet-to-blogger-mystery.html

may be this should help you

seo agencies said...

This is my first time that i visit here. I found many useful thing in your website especially its discussion. From the tons of feedback on your posts, I guess I’m not the only one receiving all the satisfaction here! keep up a good job.

SEO Web Designer said...

Posting codes is a very exciting task. This post about code snippets in blogger sounds interesting. Web designers should read this.

Landing Page Design said...

Code Snippets in Blogger? I think this is interesting. As a web designer I want to learn some new techniques also. Thank you anyway for sharing.

internet marketing product reviews said...

Snippet is a programming term for a small region of re-usable source code, machine code or text. Ordinarily, these are formally-defined operative units to incorporate into larger programming modules. Snippets are often used to clarify the meaning of an otherwise "cluttered" function, or to minimize the use of repeated code that is common to other functions.

frank@SE Sniper SEO Software said...

Hey, What an amazing blog! I read through the entire thing and it was extremely interesting! I will definitely bookmark this website and return in the future. Please visit my blog for some other interesting methods Read More…
Excellent post as always,

Windshield Replacement MN said...

I want to appreciate the author. I loved to read that. Thank you so much for sharing the post with all. You are bookmarked.

SEO For WordPress said...

Thanks so much for this flawless article;this is the kind of thing that keeps me going through out my day. I’ve been searching around for your site after asked to visit them from a colleague and was thrilled when I was able to find it after searching for long time. Being a avid blogger, I’m cheerful to see others taking initiative and contributing to the community. I would like to comment to show my appreciation for your work as it’s very encouraging, and many writers do not get acknowledgment they deserve. I am sure I’ll drop by again and will recommend to my friends.

WordPress Video Tutorials said...

Thanks so much for this flawless article;this is the kind of thing that keeps me going through out my day. I’ve been searching around for your site after asked to visit them from a colleague and was thrilled when I was able to find it after searching for long time. Being a avid blogger, I’m cheerful to see others taking initiative and contributing to the community. I would like to comment to show my appreciation for your work as it’s very encouraging, and many writers do not get acknowledgment they deserve. I am sure I’ll drop by again and will recommend to my friends.

http://wordpressseotips.net