Pages

Thursday, July 22, 2010

Syntaxhighlighter on blogger blog

I spent the best part of yesterday trying to get syntaxhighlighter by Alex Gorbatchev to work on this blog via external resources, courtesy of github.com and bitbucket.org.

I've succeeded as you see (is it broken?):

def pyfn(a):
  print "Hello Turd!", a

Anyhoo, I tested it and it works (for now).
So this is how I did it:
Bitbucket.org commit hash code
  1. I located Alex's code repository, later I'll link to the code from there;
  2. I realised that every commit on the repository has a different hash which is used in all the urls I'll be linking to, e.g. http://bitbucket.org/alexg/syntaxhighlighter/raw/9d94fe294c64... if you want to use the latest committed code you have to find the latest hash for yourself and replace the hash with the latest in the linking code; 
  3. You'll also need the actual linking code; read the official installation tutorial to understand what you're actually linking to:
<link href="http://bitbucket.org/alexg/syntaxhighlighter/raw/9d94fe294c64/styles/shCore.css" rel="stylesheet" type="text/css"></link>

<link href="http://bitbucket.org/alexg/syntaxhighlighter/raw/9d94fe294c64/styles/shCoreDefault.css" rel="stylesheet" type="text/css"></link>

<link href="http://bitbucket.org/alexg/syntaxhighlighter/raw/9d94fe294c64/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>

<script src="http://bitbucket.org/alexg/syntaxhighlighter/raw/9d94fe294c64/scripts/XRegExp.js" type="text/javascript" />
<script src='http://bitbucket.org/alexg/syntaxhighlighter/raw/9d94fe294c64/scripts/shCore.js' type='text/javascript'/>
<script src='http://bitbucket.org/alexg/syntaxhighlighter/raw/9d94fe294c64/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://bitbucket.org/alexg/syntaxhighlighter/raw/9d94fe294c64/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://bitbucket.org/alexg/syntaxhighlighter/raw/9d94fe294c64/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://bitbucket.org/alexg/syntaxhighlighter/raw/9d94fe294c64/scripts/shBrushJScript.js' type='text/javascript'/>

<!-- added bit for jQuery -->
<script src='http://github.com/jquery/jquery/raw/master/speed/jquery-basis.js' type='text/javascript' />
<script type='text/javascript'>
$(document).ready(function () {SyntaxHighlighter.all();});
</script>

Update 23-07-2010: For some reason the latest blogger template editor does not want you to combine a <script src=...> with your own code nested in it. So don't feel tempted to nest your own code with a <script> pull.

Blogger link to manual template edit
The final step is to paste this in your <head>-tag. You have to modify your blogger template to do this.
Edit template

I used jQuery to hook "SyntaxHighlighter.all()" on to the <body>-tag's onload event. This might be a tad overkill for one function invocation, but I know for certain that I'll use jQuery again on this blog.

No comments:

Post a Comment

Please help to keep this blog clean. Don't litter with spam.