SyntaxHighlighter for Blogger

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:

</body>

</html>

First, we need to add some javascript links here, i.e. between these two tags. The files are located on the author's own host, http://alexgorbatchev.com/pub/sh/current/. The version I used for this blog is also uploaded here.We'll use it from there. But if you have your own host, you can download the files and make changes (as this project is open source) and upload it there, then use your links.

First add (I mean copy and paste) SyntaxHighlighter Core scripts:

<!-- SyntaxHighlighter core js files -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js' type='text/javascript'></script>
<!-- -->

Now add highlighting brushes for your favorite languages:

<!-- SyntaxHighlighter brushes -->
<!-- some are added here, explore the hosted files for more language supports -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.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/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.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>
<!-- -->

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 -->
<script type='text/javascript'>
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;
SyntaxHighlighter.all()
</script>
<!-- -->

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 &lt; and > to &gt;, important!
** do not use tabs, use 4/8 spaces instead, no break tags needed.
*/
</pre>

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.