Skip to content

Instantly share code, notes, and snippets.

@thundergnat
Last active August 30, 2022 00:24
Show Gist options
  • Save thundergnat/5f7f36dc0cf303b110f6d7c6275fbb85 to your computer and use it in GitHub Desktop.
Save thundergnat/5f7f36dc0cf303b110f6d7c6275fbb85 to your computer and use it in GitHub Desktop.
Toggle syntax highlighting on Rosettacode task entries
// ==UserScript==
// @name Toggle syntax highlighting
// @namespace http://tampermonkey.net/
// @version 0.2
// @description toggle syntax highlighting on task pages
// @author thundergnat
// @match *://rosettacode.org/wiki/*
// @icon https://www.google.com/s2/favicons?domain=rosettacode.org
// @grant none
// ==/UserScript==
// This is an update / modification of a syntax highlighter toggle script left
// on my Rosettacode Talk page many moons ago by Gerard Schildberger:
// https://rosettacode.org/wiki/User_talk:Thundergnat#problems_with_Rosetta_Code_CAPTCHA_and.2For_.22Shared_CSS.2FJavaScript_for_all_skins.22
// It is still there, and works ok, but is untidy, hard coded to defaults I don't like
// much, and needs manual installation and setup. This just takes that script, tidies
// it up, changes some of the defaults, and repackages it as a Tampermonkey applet.
// I have no idea who the author of the original code is or I would credit them.
// This has only about maybe 10% new / modified code.
// Will only do anything for language examples that already have the site supplied
// syntax highlighting. It won't magically add it if it is not already highlighted.
// It won't do anything for "syntax highlighting added the hard way".
function get_code_divs() {
var divs = document.querySelectorAll('div');
var codes = [];
for(var i = 0; i < divs.length; i++) {
if(divs[i].className.match(/\bmw-highlight\b/)) { codes.push(divs[i]) };
}
return codes;
}
function toggle_highlight(div) {
if(div._alt_html == null) {
div._alt_html = div.innerHTML;
var spans = div.getElementsByTagName('span');
for(var i = 0; i<spans.length; i++) {
spans[i].className = '';
// Some keywords still show up as dark blue, force it all black
spans[i].style.color = 'black';
}
}
else {
var z = div.innerHTML;
div.innerHTML = div._alt_html;
div._alt_html = z;
}
}
function show_toggle() {
var codes = get_code_divs();
for(var i = 0; i < codes.length; i++) {
var a = document.createElement('a');
a.textContent = ' toggle syntax highlighting '; // default text
a.style.cursor = 'pointer'; // Change the cursor when it hovers over so you know it is clickable
// These 6 lines all define the look and feel of the toggle control, feel free to modify them however you desire
a.style.color = 'white';
a.style.background = 'navy';
a.style.fontSize = 'small';
a.style.fontWeight = 'Bold'
a.style.padding = "3px";
a.style.borderRadius = "12px";
(function(e) {
a.addEventListener('click', function() { toggle_highlight(e); }, false);
e.parentNode.insertBefore(a, e);
} )(codes[i]);
}
}
show_toggle();
@thundergnat
Copy link
Author

thundergnat commented Jun 10, 2021

Version 0.2: August 22, 2022

Updated to work with new version of Wikimedia with Pygments highlighting (instead of Geishi). Minor but critical changes.
Still haven't figured out an easy way to do line number toggling if they aren't enabled in the first place. 

Version 0.1:

First whack at it. Since I started with a working script it didn't take much effort.
The default look and feel are my preferences. If you want to change them, you need to manually edit them. 
If you know any CSS it should be trivial.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment