Using SyntaxHighlighter on blogger

What is it?

SyntaxHighlighter is a javascript code-highlighter (runs in the client browser) supporting a great set of coding languages like: C#, Java, SQL, Javascript, XML, Python, PHP and many more.

Since it runs in the browser it doesn't matter what kind of server you have, in fact, SyntaxHighlighter can run locally on your computer without any web server at all and you can run it in your home page, blog, CMS, documentation CD or any other web page. All you have to do is import the CSS and Javascript it gives you (learn more here);

Installation on blogger

You can download and make the files avaiable on your server (if you have one). But it doenst matter if you don't, since SyntaxHighlighter is already being hosted and freely available for you to use.

To use it on blogger follow this steps:
Login into you blogger acount;
Edit your blog template (Select the "Design" -> "Edit HTLM") ;
Paste the following code just below the "<head>" tag for your template (you can remove some of the .js files if you don't need the language it defines):

<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushAS3.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPowerShell.js' type='text/javascript'/>

<script type='text/javascript'>
SyntaxHighlighter.all()
</script>

If you need to support other languages check more details here: SyntaxHighlighter uses separate syntax files called brushes to define its highlighting functionality

How to use it

You just need to paste your code on blogger "write mode" (so it gets escaped) then go to "Edit HTML" and surround it with <pre class="brush: csharp"></pre> tags (case you are using C# otherwise you would use another keyword).

So when in "edit html" on blogger you would input the following code:

and, after you post, it would be displayed has:

For other languages, other than C#, use the following keywords (brushes): table of SyntaxHighlighter brushes.

IT

Pages