Add Code Block in Blogs

If you want to put some HTML, JavaScript or code of any programming language in your blogger blog posts then entering that as a simple text will mix it with plain text and that would be pretty hard for readers to differentiate between plain text and code block. To make the code look different from plain text you need to highlight code block.

We can use SyntaxHighlighter tool to insert colored code snippets on a web page using client-side javascript only. This tool is useful for users of BLOGGER because we do not have server side resource to parse and highlight the code. For implementing this tool on blooger/blogspot site, we need to do some changes in the template of blog.


Below are the steps to setup:

1. Take the backup of existing template.

2. Download the files from SyntaxHighlighter.

3. Now extract the contents of the package and upload the Scripts and Styles folder to any host or website which can be linked from your blog.A free choice is, of course, Google Docs.

4. Login to BLOGGER, go to: "Settings > Template > Edit HTML", add the following code after the tag:

</div></div> <!-- end outer-wrapper -->

<!-- You need to replace "amitkumarmca04.blogspot.com" with your [YOUR HOST] address -->

<link href='http://amitkumarmca04.blogspot.com/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://amitkumarmca04.blogspot.com/shCore.js' type='text/javascript'/>

<script src='http://amitkumarmca04.blogspot.com/shBrushCpp.js' type='text/javascript'/>
<script src='http://amitkumarmca04.blogspot.com/shBrushCSharp.js' type='text/javascript'/>
<script src='http://amitkumarmca04.blogspot.com/shBrushCss.js' type='text/javascript'/>
<script src='http://amitkumarmca04.blogspot.com/shBrushJava.js' type='text/javascript'/>
<script src='http://amitkumarmca04.blogspot.com/shBrushJScript.js' type='text/javascript'/>
<script src='http://amitkumarmca04.blogspot.com/shBrushSql.js' type='text/javascript'/>
<script src='http://amitkumarmca04.blogspot.com/shBrushXml.js' type='text/javascript'/>

<script class='javascript'>

dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');

</script>

5. Now you are all done to start posting source codes. You can use the

to enclose your source-codes, and give the name="code" attribute and class="CSharp" for your CSharp source.

For example:



<pre name="code" class="CSharp">
public class AmitKumar {
public AmitKumar() {
Response.Write("SyntaxHighlighter Example");
}
}
</pre>


will look like:

Public class AmitKumar 
{
 public AmitKumar() 
  {
   Response.Write("SyntaxHighlighter Example");
  }
}

Another example of code classes are:
For C#(C Sharp) code: class="CSharp"
For Java code: class="java"
For Python code: class="python"
For C/C++ code: class="Cpp"
For Cascading Style Sheets code: class="CSS"
For Java Script code: class="JScript"
For Sql code: class="Sql"
For Xml code: class="Xml"

The list of supported languages and their aliases can be found at the syntaxhighlighter wiki

Note: If you are posting XML/HTML, anything which has < or >, replace them with < and >