Installing SyntaxHighlighter in Blogspot blogs
Hello code bloggers, here is a short description and quick guide on how to install SyntaxHighlighter in your blogs and sites as well to beautify your codes. Actually nothing is more painful than reading out rusty codes no matter how cool they really are, so presentation does matter.
To go straight forward, go to Dashboard &rArr Layout &rArr Edit Html. Here you will see your current template. First save the current code to your hard drive before changing anything, so in-case you destroy the whole thing mistakenly, you have nothing to worry, just paste that again here, and every change is reverted. Actually it is good to store every working version of the template in your hard drive.
Now find the part in the html code:
First add (I mean copy and paste) SyntaxHighlighter Core scripts:
<!-- SyntaxHighlighter core js files -->
Now add highlighting brushes for your favorite languages:
<!-- SyntaxHighlighter brushes -->
<!-- some are added here, explore the hosted files for more language supports -->
When you paste the above lines, it will include highlighting functionality for C++, Bash, Java, Python, Plain Text, Visual Basic, XML. To add more, you can add more links to the files in this directory http://alexgorbatchev.com/pub/sh/current/scripts/. You should only add the files which has a name in the following format: "shBrush<language_name>.js". Clearly, it will add the functionality for "language_name" language.
Now the core style and theme:
<!-- SyntaxHighlighter core style -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<!-- SyntaxHighlighter theme -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
You can only use one theme at a time, Default theme is added here, its best in my opinion. However, you can check other themes from this directory: http://alexgorbatchev.com/pub/sh/current/styles/. You can change the link of SyntaxHighlighter theme to any of the files having name pattern "shTheme<theme_name>.js" from this directory.
Now add the main script that will invoke SyntaxHighlighter, also, here you can put some initial parameters (see below) as well:
<!-- SyntaxHighlighter main js -->
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.config.tagName = 'pre';
SyntaxHighlighter.defaults['wrap-lines'] = false;
SyntaxHighlighter.defaults['ruler'] = true;
Here you see, some defaults like line wrapping disabled, ruler visible, and also, SyntaxHighlighter is associated with the <pre>...</pre> tag. The clipboardSwf is the background style. And one special parameter for blogger blogs: bloggerMode = true. For the complete configuration list, visit http://alexgorbatchev.com/wiki/SyntaxHighlighter:Configuration.
All done, just save it...
How to write codes in pre-tag? Well, all you need to do is just invoke the classes in pre tag... for example, you might want to add a c++ code, you should do this:
<pre class="brush: cpp">
** write your codes here.
** make sure you convert all < to < and > to >, important!
** do not use tabs, use 4/8 spaces instead, no break tags needed.
Clearly, the brush names are those "language_names" that you included above, for example, "shBrushCpp.js" will be invoked with "cpp", "shBrushXml.js" will be invoked with "xml", etc etc... Actually, in general, the class inclusion might look like class="param_list"
For complete usage, demonstration, and information, visit: http://alexgorbatchev.com/wiki/SyntaxHighlighter in the For Users section.
Hope this helps... not a big deal. Happy blogging.