HOWTO: Add Code Syntax Highlighting to your Blogger / BlogSpot Blog

 Tuesday, March 24, 2015
Solving my own problems
Last year I decided to poke about in my blog again and managed to utterly destroy the template along with all of my past customizations. I've decided to take the time to figure this out and then document it so that I can do it again when I decide to "code in production" again. So in the typical, slimmed down style, here's how it's done.
  1. Get to your blog's dashboard (log in, select blog from blogger dashboard).
  2. Select Template on the left hand navigation and Edit HTML on the screen that loads
  3. Locate the </head> tag (side note for testing later: better to not put this in head because it will prevent page from displaying until loaded).
  4. Paste the (hopefully now highlighted) code below. We're using cdnjs as the host for the .js scripts. I've read other instructions that suggest hot-linking directly to the author's site. I checked the install instructions on the site and he specifically asks you to copy the files locally.
Template Code
Here's the code I added to <head>: 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPlain.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCSharp.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushBash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js"></script>
<script type="text/css" src=""></script>
<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" />
<script type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>
And the Html
I've included the exact HTML used to render the above. Note that the "<"'s are all replaced with &lt;. That's a limitation I've decided to accept rather than using the alternative <script> block style. 
<pre class="brush:js">
&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js">&lt;/script>
&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCSharp.min.js">&lt;/script>
&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushBash.min.js">&lt;/script>
&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.js">&lt;/script>
&lt;script type="text/css" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js">&lt;/script>
&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css" rel="stylesheet" type="text/css" />
&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeMidnight.min.css" rel="stylesheet" type="text/css" />
&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js"></script>
&lt;script type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
&lt;/script>
</pre class="brush:js">
Customizing for your purposes
SyntaxHighlighter can be customized. At this point, there's many available syntaxes to choose from. Find the brush you want and visit the cdn.js page for SyntaxHighlighter to get the link.
There's also plenty of themes. Find what you want, visit the cdn.js page for a link and add it to the scripts above.

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )