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.
Select 'Run on your Computer'. That's it, you are done.
By default, Blogger inserted their own favicon. Do you know that you customize and install your very own favicon? Here's how...
There are tonnes of method can be done to achieve this 3 column blog style layout, but I found a CSS layout from Matthew James Taylor and want to keep this as my reference because of its simplicity and straight to the point. So maybe you want to take a look.
As shown above the center and right column widths are in pixel and the left column is the main content area will control the page height.
I rarely share any file before accept for my own use or for work related file when it is too large to attach in email. But today I need some extra feature from any of the online storage service. Beside the ability to publicly share my files, I need to manage my file that can be place in online folder and I need to know how many download for each file. There are a lot of choices out there but how do I know which is the most suitable for my usage? So the hunt begin...
Firstly, my Facebook is just next to the Firefox browser tab. Why Facebook ask for my credential again? Secondly, as you can see above, the URL is not Facebook, its Facezbook. From that point I realized that it's a phishing or web forgery. Lurking my real Facebook credential.
Blogger team must been busy updating the Blogger system lately. There a few new enhance features published and I love it all especially the Blogger gadget. Hmm, the update never this aggressive before, are they up to something...
Have you try out the new Google's app called "Lively" lately? yes, no, yes, no? If no, then a short word to describe this app would be, it is just like Second Life. Meaning, it is a platform that lets user create and personalize avatars and their own virtual rooms. Than what so special about it? Read on...
