Friday, October 15, 2010

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 >

Share:

3 comments:

evilgenius said...

I have tried to follow your post but must be missing something. I uploaded the files to google docs but have no idea how change the code to reference those files instead of yours!

Amit Kumar said...

@evilgenius:

You need to replace
http://amitkumarmca04.blogspot.com with your url like http://evilgenius.com

Vikash Kumar Singh said...

I tried to follow your example but it did not work for me. May be I am missing something. You are telling to add the code at the end of tag. Which tag? Should I add it in at end of header section or body section or at the end of HTML root tag?

About Me

My photo
Based in Bangalore, INDIA, Amit is a MCC. He has an MCA from the U.P.T.U., INDIA and holds Microsoft certifications including SharePoint 2007/2010/2013. He is an contributor to MSDN and http://amitkumarmca04.blogspot.com/. Amit have experience in SharePoint,ASP.Net with C#, Classic ASP, VB,Macros,HTML,JavaScript,JSON,BootStrap and AngularJS.

Followers

Labels