Permalink
Fetching contributors…
Cannot retrieve contributors at this time
48 lines (36 sloc) 4.13 KB
title weight tags
Code Syntax Highlighting Bookmarklet for Sites like Medium without it
4
bookmarklet

Add code highlighting via highlight.js to a page without syntax highlighting by simply clicking this bookmarklet.

Highlighting Code in action

Easy Installation

If you just trust me and want to run JavaScript I wrote (seen below) on your browser, then just drag either or both of these up to your bookmarks bar. I've made one dark (darkula) and one light (solarized light) color scheme highlighters.

Highlight Code (dark) Highlight Code (light)

Custom Installation

Copy the code below and build your own bookmarklet here.

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.

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