Colorize C# Code For Blog or Website

If you are running a C# related blog or website you know how important it is to have a reliable service to convert your C# code to HTML ready to be published online. Of course you can do this by copying your formatted C# source code from Visual Studio to Microsoft Word and then paste it from Word to your blog/website. Unfortunately, as always, the easy way is not the best way. Pasting your code from Word to your blog will produce a huge amount of unnecessary HTML code which will make your website heavy and it will load slow. There should be a better way to highlight the syntax of your C# code like Visual Studio does and insert it in your blog or website.

Many tools that can colorize your C# code converting it to HTML ready to be published online are available over the Internet, but almost none of them colorizes C# code like Visual Studio. That's why I decided to create a Free Online C# Syntax Highlighter that works like Visual Studio. Actually all C# code fragments in this blog are colorized by it.

All you have to do is to open the C# Syntax Highlighter, paste you C# code in the "C# code" field and click the Highlight button. The syntax highlighter will then colorize your C# code and convert it to HTML fragment ready to be inserted in your blog or website.

Note that you will have to insert the following CSS style sheet in the <head> section of your website:

pre.cscode {margin:0em; overflow:auto; background-color:#ffffff;}
.cscode code {font-family:Consolas,"Courier New",Courier,Monospace; font-size:10pt; color:#000000;}
.cscode .key {color:#0000ff;}
.cscode .com {color:#008000;}
.cscode .str {color:#a31515;}

You can insert it either in a <script type="text/css">...</script> block or as an external style sheet using the <link rel="stylesheet" type="text/css" href="csharp.css" /> tag. Note that in the latter case you should save the given CSS style sheet in a file called "csharp.css" and put it in the folder of your page.

If you cannot or you do not want to insert a CSS style sheet to your blog/website, you can take advantage of the style inlining feature of the C# Syntax Highlighter. Simply select the "Inline Styles" check box and the highlighter will inline the necessary styles in "style" attributes, so that you won't have to add the style sheet presented above to your blog/website.

Instructions for Blogger

If you are running a Blogger blog, you should do the following in order to add the CSS style sheet to your blog:

Go to "Template"
Click the Customize button
In the Template Designer click "Advanced" from the menu on the left
Scroll down and click "Add CSS"
Copy the CSS style sheet presented above and paste it in the editor window
Click the Apply to Blog button on the upper right corner of the page to save the changes.

Pavel Vladov

Wednesday, October 3, 2012

Colorize C# Code For Blog or Website

Instructions for Blogger

See also:

10 comments: