How to display code in your wordpress site

 
If you have several wordpress post that contain some programming code such as in C#, vb.net, java etc. It should be better if you display code in different way from the other content. We can use the <code> tags for displaying code and this is the very common and easy idea. But if you are displaying code of some modern programming language such as .net programming languages or web development languages, you need to show the code more different, it helpful for understanding code by the users.
In this article we will discuss various ways to display the code with the help of available Plugins and manually.

Using character entities in <code> tag

<code> is very useful tags and it distinguishes code from normal language.
Suppose if you want to show the some HTML code in your post such as:
 

<h1>Use of Div Tags :</h1>
<div id=”maindiv”>
</div>

 
Wordpress will create a new container in your web page. Because wordpress assume this code as HTML code of your post and this is just a code sample that we want to show on the post. In this case if we use < and > for the < and >tags like:
<code>
<h1>Use of Div Tags :</h1>
<div id=”maindiv”>
</div>
</code>
Now wordpress does not interpret above code as HTML and not create a new div container.
And result will show as:

<h1>Use of Div Tags :</h1>
<div id=”maindiv”>
</div>

 

Using <pre> tags

This is the next advanced feature for displaying some specific code of lines in the box.
This is better than <code> tags when you are displaying exact code of lines because The <pre> tag instructs the browser to use the monospace code font, and display exactly code of lines whatever is inside of the <pre> tags. Every space, line break, every bit of code is exactly reproduced.

private static DataTable getdt()
       {
           DataTable dt1 = new DataTable();
           return dt1;
       }

Using SyntaxHighlighter plugin

You can highlight code snippets with this JavaScript based plugin. it is easily integrate with your wordpress site. SyntaxHighlighter plugin supports all commonly used programming languages included AS3, C++, C, C#, ColdFusion, Delphi, CSS, Java, JavaScript, JavaFX, PHP, Perl, Python, Ruby, SQL,VB.NET, VB, XML, (X)HTML.

you can install SyntaxHighlighter plugin from the plugin directory in wordpress.org.
 

Google Syntax Highlighter

This plugin created by Alex Gorbatchev is also works great. Google Syntax Highlighter supports C++, C, C#, CSS, Delphi, Java, Java Script, PHP ,Python, Ruby, Sql, VB, vb.net, XML, HTML.


You have also control over showing line numbers, space between lines etc.

 

Highlight Source Pro

This plugin is based on GeSHi or Generic Syntax Highlighter, GeSHi is the free software library that allows syntax highlighting of source code for several markup and programming languages. Highlight Source Pro gives us the more control over appearance of the code. If you have some knowledge of css and how GeSHi works? than this plugin is very useful for you. you can use this plugin for any language.

I am also using this plugin for highlighting source code in the my site. you just need to place your code in the specified tags.
You can also use line numbers in your code.

There are also WordPress code plugins available for highlighting your source code. you can try and see if another plugin better suits you.

Thanks