Add code highlighting via highlight.js to a page without syntax highlighting by simply clicking this bookmarklet.
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]);
}
}
});