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