Format My Source Code for Blogging

Update: July 23rd 2011
Here is a new post on Formatting source code for blogging which uses easier, faster and better approach for Formatting Source Code for Blogging. Check this out:
Format Source Code for Blogging Tool


I've been using Blogger as my blogging engine for a long time. I am very much impressed at how easy it makes it to update your blogs look and feel and how free you are with the HTML and semantic layout of the pages. And now with new Template Designer, life is easier than it was before.

There was one question always in my mind that;


How To Format My Source Code for Blogging??

The thing that seemed to be missing in blogger was allowing developers to copy and paste code into their blogs and allow other users to copy and paste the code from the blog into their own code.


Using SyntaxHighlighter Javascript Library

Adding Syntax Highlighter to Blogger Template

• Copy the following code and paste it into your Blogger Template just above the </head> tag

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

• Save the template
• Then you can start creating code blocks in your existing or new Blog entries.
• There are 2 ways to add a code block using syntaxhighlighter

Method 1: Using the script Tag

<script type="syntaxhighlighter" class="brush: csharp">
<![CDATA[
// Comment
public class Testing
{
public Testing() {
}
public void Method()
{
/* Another Comment
on multiple lines */
int x = 9;
}
}
]]></script>

this will become:

<script type="syntaxhighlighter" class="brush: csharp">
<![CDATA[

// Comment
public class Testing {
public Testing() {
}

public void Method() {
/* Another Comment
on multiple lines */
int x = 9;
}
}
]]></script>

Method 2: Using the pre Tag

<pre class="brush: csharp">
// Comment
public class Testing
{
public Testing() {
}
public void Method()
{
/* Another Comment
on multiple lines */
int x = 9;
}
}
</pre>

this will become:

<script type="syntaxhighlighter" class="brush: csharp">
<![CDATA[

// Comment
public class Testing {
public Testing() {
}

public void Method() {
/* Another Comment
on multiple lines */
int x = 9;
}
}
]]></script>

Here are some sample codes for using SyntaxHighlighter with various coding languages

Using C# Code

<pre class="brush: csharp">SqlCommand sqlCmd = new SqlCommand();
        sqlCmd.CommandText = "select * from [YourTableName] Where SomeCondition = @someCondition";
        sqlCmd.Parameters.AddWithValue("@someCondition", menuID);
        sqlCmd.CommandType = CommandType.Text;
</pre>

will become:

SqlCommand sqlCmd = new SqlCommand();
sqlCmd.CommandText = "select * from [YourTableName] Where SomeCondition = @someCondition";
sqlCmd.Parameters.AddWithValue("@someCondition", menuID);
sqlCmd.CommandType = CommandType.Text;

SqlCommand sqlCmd = new SqlCommand();
        sqlCmd.CommandText = "select * from [YourTableName] Where SomeCondition = @someCondition";
        sqlCmd.Parameters.AddWithValue("@someCondition", menuID);
        sqlCmd.CommandType = CommandType.Text;

Using VB Code

<pre class="brush: vb">Dim sqlCmd As New SqlCommand()
sqlCmd.CommandText = "select * from [YourTableName] Where SomeCondition = @someCondition"
sqlCmd.Parameters.AddWithValue("@someCondition", menuID)
sqlCmd.CommandType = CommandType.Text
</pre>

will become:

Dim sqlCmd As New SqlCommand()
sqlCmd.CommandText = "select * from [YourTableName] Where SomeCondition = @someCondition"
sqlCmd.Parameters.AddWithValue("@someCondition", menuID)
sqlCmd.CommandType = CommandType.Text

Using html Code

<pre class="brush: xml"><table cellspacing="0" cellpadding="0" width="99%" align="center" border="0">
        <tr>
          <td class="mhead" height="30">
            <span class="class1 class2">Some Text</span>
          </td>
        </tr>
</table>
</pre>

will become:

<table cellspacing="0" cellpadding="0" width="99%" align="center" border="0">
        <tr>
          <td class="mhead" height="30">
            <span class="class1 class2">Some Text</span>
          </td>
        </tr>
</table>

Using javascript Code

<pre class="brush: jscript">function FillMobileCode()
{
        var Phone_Country_Code;        
        var TelePhone_Code;
        Phone_Country_Code= document.getElementById('Mobile_Phone_Country_Code');              
        Mobile_TelePhone_Code= document.getElementById('Mobile_TelePhone_Code');          
        Mobile_TelePhone_Code.value=   Phone_Country_Code[Phone_Country_Code.selectedIndex].value;                    
}
</pre>

will become:

function FillMobileCode()
{
        var Phone_Country_Code;        
        var TelePhone_Code;
        Phone_Country_Code= document.getElementById('Mobile_Phone_Country_Code');              
        Mobile_TelePhone_Code= document.getElementById('Mobile_TelePhone_Code');          
        Mobile_TelePhone_Code.value=   Phone_Country_Code[Phone_Country_Code.selectedIndex].value;                    
}

Using SQL

<pre class="brush: sql">--Some Comments
   UPDATE MyTable
   SET Column1 = 0,
 Column2 = 'a',
 Column3 = GetDate()
   WHERE SomeCondition = @SomeCondition
</pre>

will become:

--Some Comments
   UPDATE MyTable
   SET Column1 = 0,
 Column2 = 'a',
 Column3 = GetDate()
   WHERE SomeCondition = @SomeCondition

Using php Code

<pre class="brush: sql"><?php 
// Do your insert query... 
mysql_query("INSERT etc..."); 

// This finds the id of the row once it has been added... 
$id = mysql_insert_id(); 

// Display it... 
echo $id; 

?>
</pre>

will become:

<?php 
// Do your insert query... 
mysql_query("INSERT etc..."); 

// This finds the id of the row once it has been added... 
$id = mysql_insert_id(); 

// Display it... 
echo $id; 

?>

Using CSS Code

<pre class="brush: css"><style type="text/css">
pre.source-code {
  font-family: Lucida Console, fixed, monospace; 
  color: #000000;
  background-color: #eee;
  font-size: 12px;
  border: 1px dashed #999999;
  line-height: 14px;
  padding: 5px;
  overflow: auto;
  width: 100%
}
</style>
</pre>

will become:

<style type="text/css">
pre.source-code {
  font-family: Lucida Console, fixed, monospace; 
  color: #000000;
  background-color: #eee;
  font-size: 12px;
  border: 1px dashed #999999;
  line-height: 14px;
  padding: 5px;
  overflow: auto;
  width: 100%
}
</style>

Important Note!

Apparently blogger interpret HTML tags. Thus create some issues like:

Example 1:

When you post <script type="text/javascript">
It interprets it!!

Example 2:

static Dictionary<int, List<Delegate>> _delegate = new Dictionary<int,List<Delegate>>();

into this

static Dictionary> _delegate = new Dictionary>();>();

So in order to avoid this situation, what you have to do is HTML encode your program. First replace all & with &, then replace all< with < and > with >.

There are a lot of more options in it. I shared only a few.
SyntaxHighlighter seemed quite useful to me so i thought to share it with this blog post.
Formatting my Source code for blogging was not that easier before!

Happy Blogging!