Adding SyntaxHighlighter to Blogger Dynamic Views

This blog uses Blogger Dynamic Views and since I write a lot about software development I wanted a way to add nice formatting to the source code snippets.  I have used SyntaxHighlighter before and really liked the results. But I was having trouble getting it to work in Dynamic Views. So I did some research and came up with a decent solution.  It is a conglomeration of different approaches taken by different people that I found to be the simplest method for using SyntaxHighlighter with Dynamic Views.

To get started open up Blogger and select Templates.  Then select the Edit HTML button as shown in the following illustration.


In the dialog that opens find the closing head tag and insert this code just before it and save your changes.

<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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

Note: This code is being formatted by SyntaxHighlighter.

So far this is no different from how you would add SyntaxHighlighter to any Blogger blog. The next steps are what varies. First we need to add the style sheets for SyntaxHighlighter. I found how to do this from this blog.  Follow their instructions for adding the style sheets.  To get to the CSS editor press the Customize button as shown in the previous illustration.  Then click Advanced in the left navigation pane and then Add CSS.

My approach differs from the one mentioned in the referenced blog because I have added links to the SyntaxHighlighter JavaScript whereas they include compiled JavaScript that includes all of these references at the end of the page. I could not use this compiled JavaScript because it did not include some of the brushes I wanted to use, and I was too lazy to try to figure out how they were compiled so I could recompile them. So I found with the reference I added in the first steps and one line of JavaScript in each post it worked just fine.  Here is the JavaScript that need to be at the end of every post that uses SyntaxHighlighter.

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

This fixes an issue with the order in which Dynamic Views loads the JavaScript. Now you just use the pre tags around your source code whenever you use SyntaxHighlighter. For more information on SyntaxHighlighter go here.

Popular posts from this blog

Using Claims in ASP.NET Identity

Adding Email Confirmation to ASP.NET Identity in MVC 5

Customizing ASP.NET Identity in MVC 5