EvanLovely
2/19/2016 - 9:32 PM

Syntax highlighting bookmarklet

Syntax highlighting bookmarklet

readme.md
content_copyfile_download
  • Rendered
  • Source

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
content_copyfile_download
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]);
        }
    }
});