Tuesday, May 15, 2012

Highlight your code

I believe there are many programmers just like me who has a tech blog which use as channel to share ideas and knowledges with other people. Sometimes share some code snippets in inevitable. Alex Gorbatchev, the creator of syntaxhighlighter, has been great for sharing his scripts syntaxhighlighter to the rest of world. It has been worked great on many platforms and framework and very easy to implement.

Personally, I have used it in drupal, wordpress and even now in blogger. I believed there are many people are using it as well; however, if you installed the recent version (v3.0.x), you may notices that the toolbar does not work well properly. Some how the toolbar icons are missing. The only icon you can see is the "?".  It appeared to me that many people are experiencing the same issue: http://stackoverflow.com/questions/4607609/syntaxhighlighter-not-showing-toolbar. I spent an hour to try to solve it without luck. And even the demo page on it official web site also has the problem that can be seem here: http://alexgorbatchev.com/SyntaxHighlighter/manual/demo/toolbar.html.

Regardless of the problem with current version, if you still want to use syntaxhighligher, as I know of, v2.1.382 still work great and it is the version that I am using it on this post.

As a side note, to use syntaxhiglighter in blogger.com, the only thing need to modify is the template. Add the following code right before the end of head tag. However, if you are running on Dynamic view, you CANN'T modify the template in HTML form. For that, there's a great solution on this post http://www.alexconrad.org/2011/12/highlight-code-with-bloggers-dynamic.html


If you don't like the scripts from Alex Gorbatchev for some reasons. There are other solutions you may find interested and may be easier to implement. 

THE GIST SOLUTION

If you have a github account, then you can use gist to share you code with other.Basically when you create a gist, you can embed into your page simply include oneline of javascript: Result:

THE GOOGLE CODE PRETIFY SOLUTION

This also a straight forward way to enable syntax highlight, and this also works well with dynamic view on blogger.com. The idea is for every page that you want syntax highlight, you put this the following line of javascript at the button of your page/post and also add some small amount of css in the template. You can find out more info on how this work at: http://www.alexconrad.org/2011/12/highlight-code-with-bloggers-dynamic.html
Result:
    
function IncludeJavaScript(sURL) {
    var oRequest;
    
    // if using a normal browser
    if (window.XMLHttpRequest) {
        oRequest = new XMLHttpRequest();
    } else {
        if (window.ActiveXObject) {
            // if using IE 6 for some terrible reason
            oRequest  = new ActiveXObject('MSXML2.XMLHTTP.3.0');
        }
    }
    
    oRequest.open("GET",sURL,false);
    oRequest.setRequestHeader("User-Agent",navigator.userAgent);
    oRequest.send(null)
    
    if (oRequest.status==200) {
        eval(oRequest.responseText);
    } else {
        // alert("Error executing XMLHttpRequest.");
    }
}

// Now call the function, passing the script, here I'm including jQuery
IncludeJavaScript('https://gist.github.com/2710367.js');