Blogspot Syntax Highlighting

I was playing with the theme for this blogspot since certain sections didn't seem to work (perhaps this is with the browser plugins I use). I ended up losing some of the configurations and had to rebuild it with the help of Google. Instead of doing that in the future, I figure I might as well make a post about it for reference and maybe someone else will find it useful at the same time.

The first thing I did was went to the Template section in the blogger admin area. And selected Edit HTML to bring up the in browser editor. Now I use Syntax Highlighter  by Alex Gorbatchev for all my Syntax Highlight needs here. To use this, we reference the CloudFlare Content Distribution Network he has hosted them on. Now we just need to add the script references to blogger.

We do this by adding all the brushes we want to the script section in the editor we are looking at. You can put them after the following line:

<script expr:src='data:blog.dynamicViewsCommentsSrc'/>

Alternatively, you can also put them at the end of your template to reduce loading times. If you want to do that put them before the </body> and before the following script:

<script language='javascript' type='text/javascript'>
      window.onload = function() {
        blogger.ui().configure().view();
      }
</script>

This is the recommended location to put these as it makes the user experience more fluid by providing the content faster, and performing all the changes after the fact.

These are the brushes included in my template:

<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPlain.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCSharp.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushBash.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCpp.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPhp.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPowerShell.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushSql.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js' type='text/javascript'/>

These provide the syntax highlighting rules for the various languages. Just under this I have the Cascading style sheets responsible for the actual syntax highligting.

<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css' rel='stylesheet' type='text/css'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeMidnight.min.css' rel='stylesheet' type='text/css'/>

And finally we add the JavaScript code to start it when the document is loading which looks like this (which is placed just after the links):

<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

After that when you want to add syntax highlighting to a post all you need is the following JavaScript at the bottom of the post:

<script language="javascript" type="text/javascript">
    SyntaxHighlighter.highlight();
</script>

Which I have included in the template used for new posts.

Alternatively, you can include this line at the bottom, just underneath the script that configures the blogger view where the alternative place to put the JavaScript includes is. However, I can't guarantee that it will appear when you navigate to a post.

Other than that to define a section of code you want to syntax highlight you use the following snippet replacing bash with the language alias of choice. You can find a list at the site linked above or more specifically here.

<pre class="brush: bash">

</pre>

You do have to be careful to escape certain characters like the < and > or it will mess with the contents and users won't be able to directly copy paste due to errors. Just something to consider, which is why preview is your friend. There are also custom brushes available for other syntax.