JSSyntaxHighlighterHack.js

/**
 * A real quick shot for syntax highlighting via highlight.js on any page
 * Unobtrusive, once loaded, anything goes.
 * 
 * Version 0.0.1a, jens a. ewald, ififelse.net, www.muthesius.de, (cleft) 2011
 * 
 */
// the script
$.getScript('http://yandex.st/highlightjs/5.16/highlight.min.js',function(){
    // defautl language?
    $('pre code').addClass('java')
    $('pre code').each(function(i, e) {hljs.highlightBlock(e, '  ')});
    
    // load the styles
    $('body').append('<link rel="alternate stylesheet" title="Default"       href="http://yandex.st/highlightjs/5.16/styles/default.css"> ')
    $('body').append('<link rel="alternate stylesheet" title="Dark"          href="http://yandex.st/highlightjs/5.16/styles/dark.css"> ')
    $('body').append('<link rel="alternate stylesheet" title="FAR"           href="http://yandex.st/highlightjs/5.16/styles/far.css"> ')
    $('body').append('<link rel="alternate stylesheet" title="IDEA"          href="http://yandex.st/highlightjs/5.16/styles/idea.css"> ')
    $('body').append('<link rel="alternate stylesheet" title="Sunburst"      href="http://yandex.st/highlightjs/5.16/styles/sunburst.css"> ')
    $('body').append('<link rel="stylesheet"           title="Zenburn"       href="http://yandex.st/highlightjs/5.16/styles/zenburn.css"> ')
    $('body').append('<link rel="alternate stylesheet" title="Visual Studio" href="http://yandex.st/highlightjs/5.16/styles/vs.css"> ')
    $('body').append('<link rel="alternate stylesheet" title="Ascetic"       href="http://yandex.st/highlightjs/5.16/styles/ascetic.css"> ')
    $('body').append('<link rel="alternate stylesheet" title="Magula"        href="http://yandex.st/highlightjs/5.16/styles/magula.css"> ')
    $('body').append('<link rel="alternate stylesheet" title="GitHub"        href="http://yandex.st/highlightjs/5.16/styles/github.css"> ')
    $('body').append('<link rel="alternate stylesheet" title="IR_Black"      href="http://yandex.st/highlightjs/5.16/styles/ir_black.css">')

    // get an empty list of all styles:
    var styleList = $('link[title],link[href^="http://yandex.st/highlightjs/5.16/styles"]')

    // first add it to the DOM
    $('pre').before('<div class="styleselector collapsable"><span class="toggle">Code Highlighting Style ändern (DEBUG)?</span><p class="list"></p></div>')

    $('div.styleselector .list').html($(styleList).map(
        function (i,el){
            return '<span class="style-link">'+$(el).attr('title')+'</span>'.toString()
        }).toArray().join(" ")
    )
    
    // incom specific style ajustment
    function resetCodeBlock(){
        $('pre code').css('padding-right','2px')
        $('pre code').css('padding-left','2px')
        $('pre code').css('border','1px solid #333')
        $('pre code').css('width','468px')
        $('pre code').css('overflow','hidden')
    }
    resetCodeBlock();
    
    $('.styleselector').css({   'background-color':'#aaa',
                                'margin':'0px',
                                'padding':0,
                                'width':'474px',
                                'margin-bottom':'1px'
                               });
    $('.collapsable .toggle').css({
                                'padding-left':'7px',
                                'color':'#aaa',
                                'padding-right':'7px',
                                'cursor':'pointer',
                                'display':'block',
                                'background-color':'#777',
                              })
    $('.styleselector .list').css({
                                'padding-left':'7px',
                                'padding-right':'7px',
                                'display':'none',
                                'margin-top':'0.25em',
                                'margin-bottom':'0.25em'
                               });
   $('.styleselector .list .style-link').css({
                                'font-weight': 'bold',
                                'color':'black',
                                'padding-right':'0.2em',
                                'cursor':'pointer',
                                'text-decoration':'underline'
                               })
    
    $('.collapsable span').click(function(e){
        $(this).parent().find('.list').slideToggle('fast');
        return false
    })

    $('.style-link').click(function(e){
        // switch style sheets
        styleList.attr('disabled','true')
        $('link[title="'+$(this).text()+'"]').removeAttr('disabled')
        
        // some specific style ajustment
        resetCodeBlock();
        return false;
    })
    

})