How to add Syntax highlighter on your blog

I was searching for a code highlighter for this blog I was considering a couple of them. I settled for SyntaxHighlighter which supports lots of languages and themes. My only problem is where to store the .js files, since blogger does not allow .js files uploaded, I could embedded the .js library to the template but I don't want that.

some blog suggested to host in in google groups or other 3rd party websites which offers limited bandwidth with no assurance of up time.

I found a, publicly hosted .js files, while reading through the instruction. which was awesome!

Here are the JavaScript headers you can use for your blog:
you can remove the ones that you don't want to use.

<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>


Insert it before the: </head> tag of your template.
If you're using blogger then go to Layout->Edit Html search for the </head> and insert it exactly before that html tag.

You can wrapped your code in side a <pre> or inside a <script> tag

using it is as simple as creating the container html tag with the corresponding class brush.

Here is a sample on how to use it with csharp using class="brush: c#"
        public DockStyle DockStyle 
        {
            get {return this.dockStyle;}
            set {this.dockStyle = value;}
        }


If you have Dreamweaver, or other html tool, then you can escape your html characters first before posting it to your blogg. If you don't have those tools then you can use this tool instead

If you encounter anymore problem refer to this blog post here

Leave a Reply

Proudly powered by Blogger
Theme: Esquire by Matthew Buchanan.
Converted by LiteThemes.com.