Thursday, February 7, 2008
How to write & colorize html code inside post
Well, you probably have noticed that when you write a html code in your post, blogger does not show it in html format, rather it execute your html. I was facing the same problem while trying to write a html code example. Let's see how we can write html inside a blogger post. In this tutorial I will also show you how to colorize or highlight your html, Java or other syntax in a very nice format.
Way to write code inside a post
Just one thing you need to do, convert < to < and > to > from your html code.
How to convert code & colorize it automatically?
The above manual process is very time consuming. You can do this conversion automatically with CodeHTMLer. Simply paste your C#, C++, Java, JScript, VB.net, XML, Powershell and F# code into the available text box and click "Htmlify Code" button. The page will refresh and you will find your converted code at the bottom of the page. Copy them and paste it into your blog post.
Try it yourself
Let's see the process with the following html code:
<html>
<body>
<h1>Hello World</h1>
</body>
</html>
Got to this link, paste the above html code, choose code language as XML & press "Htmlify Code" button. It will return you following output:
<pre><span style=' color: Blue;'><</span><span style=' color: Maroon;'>html</span><span style=' color: Blue;'>></span>
<span style=' color: Blue;'><</span><span style=' color: Maroon;'>body</span><span style=' color: Blue;'>></span>
<span style=' color: Blue;'><</span><span style=' color: Maroon;'>h1</span><span style=' color: Blue;'>></span>Hello World<span style=' color: Blue;'><</span>/<span style=' color: Maroon;'>h1</span><span style=' color: Blue;'>></span>
<span style=' color: Blue;'><</span>/<span style=' color: Maroon;'>body</span><span style=' color: Blue;'>></span>
<span style=' color: Blue;'><</span>/<span style=' color: Maroon;'>html</span><span style=' color: Blue;'>></span></pre>
Copy & paste these codes into your blog post. Publish your post and finally you will find following output:
<html>
<body>
<h1>Hello World</h1>
</body>
</html>
Isn't it cool? This process is very good and fast. But there is a limitation of this method. It can colorize only few languages.
Now let me know how do you write code inside your post?
Subscribe to:
Post Comments (Atom)
1 comments:
While there may be limited languages currently for CodeHtmler it is very extensible so you can easily add new language definitions, by just modifying an xml file. Checkout the project at http://www.codeplex.com/CodeHtmler.Also if you want to customize your colors or code elements and have them presisted you can use the CodeHtmler Windows Live Writer plugin.
Post a Comment