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:
- 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.
- 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:
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
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.
Posting codes is a very exciting task. This post about code snippets in blogger sounds interesting. Web designers should read this.
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.
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.
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,
I want to appreciate the author. I loved to read that. Thank you so much for sharing the post with all. You are bookmarked.
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.
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
Post a Comment