Thursday 3 January 2013

Syntax Highlighting in Blogger

Because Blogger does not seem to allow you to serve your own separate JS files, I've cloned the Git repo of alexgorbatchev/SyntaxHighlighter and use Github's capability to serve raw files.

E.g., this block of code is at the bottom of my Blogger template.

<!-- GRIMBO JS -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js'></script>
<script src='https://raw.github.com/gitgrimbo/SyntaxHighlighter/master/build/output/scripts/shCore.js' type='text/javascript'>
</script>
<script src='https://raw.github.com/gitgrimbo/SyntaxHighlighter/master/build/output/scripts/shLegacy.js' type='text/javascript'>
</script>
<script src='https://raw.github.com/gitgrimbo/SyntaxHighlighter/master/build/output/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='https://raw.github.com/gitgrimbo/SyntaxHighlighter/master/build/output/scripts/shBrushPlain.js' type='text/javascript'></script>
<script src='https://raw.github.com/gitgrimbo/SyntaxHighlighter/master/build/output/scripts/shBrushXml.js' type='text/javascript'></script>
<script type='text/javascript'>SyntaxHighlighter.all();</script>
<!-- GRIMBO JS -->

It works fairly well, apart from the delays caused by the number of files that Blogger downloads by default (76 requests, 449KB transferred, 15.34s total time, 10.28s onload, 8.89s DOMContentLoaded, from one empty-cache test).

NOTE: Github seems to respond to the script requests over http with "301 Moved Permanently", redirecting to the https protocol; thus adding a HTTP 301 per request and slowing the page load. So I use https in the first place. (Correct as of 04/01/2012)

No comments:

Post a Comment