Wednesday, October 3, 2012

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:

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

See also:

10 comments:

  1. Hello Pavel,

    I am very thankful for the Help provided via your blog, TO colorize the C# code. I have my own blog , where sometime i post COde related to C#. Now it's Very beautiful.
    Thanks a lot .God Bless you :)

    ReplyDelete
    Replies
    1. Thank you for the nice words. I'm glad I have helped. Happy blogging and colorizing ;)

      Delete
  2. Thank you for the excellent information, its very helpful...

    ReplyDelete
  3. Nice work! I have used it successfully!

    ReplyDelete
  4. Thanks a lot I use it a lot!

    ReplyDelete
  5. Thanks!
    Helped to post the code sample on the forum, where code formatting virtually does not exist.
    Good work!

    ReplyDelete