Syntax Highlighter - Easy way to insert code to your Blog

Are you unable to NEATLY insert html/code in your blog? Yes I am talking about NEATLY injecting code to your blogger’s post. There are so many ways through which you can insert the code, but displaying it in a CLEAN and NEAT way is a common problem.
Solution to your problem is – SyntaxHighlighter. SyntaxHighlighter is designed to enhance the appearance for your injected code so it becomes more presentable and readable. Follow the simple steps listed below to HIGHLIGHT your code:

Download the latest version (2.1.364) of SyntaxHighlighter from here

Extract the archive any where on your machine. Since your blogger will require scripts and stylesheets while formatting the injected code, therefore you have to upload the required files to some file hosting server. I am using MyDataNest to host the files. Other option is to use the files directly from the Amazon S3 where all the files are hosted for SyntaxHighlighter. To know more about how to use Amazon S3 hosting server, check out - Hosting details

If you are uploading files to your hosting server, then you have to make few changes in shCore.css. In this file location of all the .png files are relative to shCore.css. You need to replace it with the url generated by your hosting server for the .png files. For example:

Code from the original shCore.css:

.syntaxhighlighter .toolbar .item.viewSource
{
 background-image: url(page_white_code.png) !important;
}

Replaced with the new URL:

.syntaxhighlighter .toolbar .item.viewSource
{
 background-image: url(“http://www.mdn.fm/files/203599_tgby9/page_white_code.png”) !important;
}

Beauty of SyntaxHighlighter is that it is not limited to styling HTML. It also supports plenty of other languages like:

• XML
• PHP
• SQL
• Java
• AppleScript

So if you want to style PHP code then use PHP specific script file - shBrushPhp.js

I this example I will be formatting javascript code. Therefore I’ll be using files which are required to format javascript. To format javascript, I need following files:
Script Files:

• shCore.js
• shBrushJScript.js

Stylesheets:

• shCore.css
• shThemeDefault.css

Insert following piece of code in your blogger’s post before you inject the code to be formatted:

<div style="display:none">
<script type="text/javascript" src="http://www.mdn.fm/files/203429_cxbgd/shCore.js"></script> 
<script type="text/javascript" src="http://www.mdn.fm/files/203418_pxjga/shBrushJScript.js"></script> 
<script type="text/javascript" src="http://www.mdn.fm/files/203407_1hmq9/shBrushBash.js"></script> 
<script type="text/javascript" src="http://www.mdn.fm/files/203409_yhno5/shBrushCpp.js"></script> 
<style type="text/css"> 
@import url("http://www.mdn.fm/files/203601_zvagb/shCore.css"); 
@import url("http://www.mdn.fm/files/203375_cvxdp/shThemeDefault.css"); 
</style> 
<script type="text/javascript">  
SyntaxHighlighter.all(); 
</script> 
</div>

Now all you have to do is to insert your code between <pre></pre> tags. Also you need to specify the type of bursh - language code. For example, to style javascript code, bursh type should be jscript:

<pre class="brush: jscript">
$('a').click(function(){
//do something
})
</pre>