http://mlawire.blogspot.de/2009/07/blogger-syntax-highlighting.html
Very simple :)
EDIT 2012/08/14:
It wasn't as simple as I thought. After digging arount a little i found how to do it properly.
This links helped me out:
http://derkan.blogspot.de/2011/11/adding-syntaxhighlighter-to-blogger.html
Basically you have to copy the content of the css files you will use under Templates->Customize->Advanced->Add Css
I used the files
https://github.com/alexgorbatchev/SyntaxHighlighter/blob/master/styles/shCore.css
https://github.com/alexgorbatchev/SyntaxHighlighter/blob/master/styles/shCoreDefault.css
After clicking Apply to Blog you can add the code from the derkan blog to your post. I modified the code for my needs like this:
<div style="display:none"> <pre class="brush:js"></pre> <pre class="brush:csharp"></pre> </div>
<script type="text/javascript"> function loadScript(url, callback){ var script = document.createElement("script") script.type = "text/javascript"; if (script.readyState){ //IE script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } }; } else { //Others script.onload = function(){ callback(); }; } script.src = url; document.getElementsByTagName("head")[0].appendChild(script); } loadScript("http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js", function(){ loadScript("http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js", function(){ SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.autoloader( 'c# c-sharp csharp http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js', 'js jscript javascript http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' ); SyntaxHighlighter.all(); } ); } ); </script>
The invisible div forces the load of all scripts, you wan't to use. Without this div it could happen, that you would get an error saying: brush XYZ not found.
Infos about the autoloader script you can find here.
No comments:
Post a Comment