Posting Code To A Blogger Blog

Added support to this blog for syntax-highlighted code blocks in this blog using SyntaxHighlighter by Alex Gorbatchev.

I wanted to add properly formatted and syntax-highlighted code blocks to this blog, so I looked into what others were doing and what was considered best practice at this time. The best single article I read covering this topic was “How to Post Code To Your Blog and other Religious Arguments” by Scott Hanselman. Visually, my favorite code blocks were those formatted as though they were in Sublime Text (example #1, example #2). However, I could not figure out how to accomplish that without making the underlying material a mess; I suspect there is a tool for Jekyll or similar, which I’m not currently using and cannot easily take advantage of. As such, my choice is instead to use SyntaxHighlighter by Alex Gorbatchev. The SyntaxHighlighter source code is on GitHub and it keeps the underlying code intact inside a single <pre> tag. Also, Alex very kindly offers free public hosting of SyntaxHighlighter, which makes using it on Blogger much simpler (include <script src=””> tag calls instead of copy-pasting the source either into JavaScript widgets or the template itself).

The SyntaxHighlighter installation is as simple as one could hope, though you do need to edit the HTML of your Blogger template directly (Blogger > Template > Edit HTML). Just include the necessary files just before the </head> tag:

<!-- support for SyntaxHighlighter by alexgorbatchev.com -->
<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/shBrushCss.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/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

And then add a couple lines of JavaScript at the end of the template, just before the </body> tag:

<script language='javascript'>
    // support for SyntaxHighlighter by alexgorbatchev.com
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

I also was not able to get the AutoLoader to work, so instead I’m explicitly including all of the code brushes I intend on using (out of the many default available brushes).

Using it is similarly straightforward. There is a demo. Used trivially, it is just content in a <pre> tag with a class=”brush: language”, but there are additional options if you care. The one caveat is that all right angle brackets must be HTML escaped (you must replace all “<” with “<” in order to avoid it being interpreted improperly by browsers and other readers) (read the installation page).

Leave a Reply Cancel reply