Syntax highlighting bookmarklet

readme.md

Code Highlighting Bookmarklet

Add code highlighting via highlight.js to a page without syntax highlighting.

Installation

Copy the code attached and build your own bookmarklet here.

Customization

You can set the colorScheme variable to any you find here. Don't include the .min.css; so if I want darkula.min.css, I just have var colorScheme = 'darkula'; at the top.

highlight-code-bookmarklet.js

var colorScheme = 'darkula';

var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/' + colorScheme + '.min.css');
document.getElementsByTagName('head')[0].appendChild(link);

var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js');
document.getElementsByTagName('head')[0].appendChild(script);
script.addEventListener('load', function() {
    var pres = document.querySelectorAll('pre');
    for (var i = 0; i < pres.length; ++i) {
        if (!pres[i].querySelector('code')) {
            window.hljs.highlightBlock(pres[i]);
        } else {
            window.hljs.highlightBlock(pres[i].querySelectorAll('code')[0]);
        }
    }
});

This is awesome, thanks!

awesome!!