ThierryDD
3/26/2018 - 6:04 AM
Add Syntax Highlighting to Steemit.com
Add Syntax Highlighting to Steemit.com
// ==UserScript==
// @name Syntax Highlighting for Steemit
// @version 1.1
// @description Adding source code syntax highlighting to Steemit!
// @author Grooviz
// @license GPL-3.0+; http://www.gnu.org/licenses/gpl-3.0.txt
// @match http*://*.steemit.com/*
// @grant GM_addStyle
// @grant GM_getResourceText
// @grant GM_setValue
// @grant GM_getValue
// @require https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js
// @resource agate https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/agate.min.css
// @resource androidstudio https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/androidstudio.min.css
// @resource arduino-light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/arduino-light.min.css
// @resource arta https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/arta.min.css
// @resource ascetic https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/ascetic.min.css
// @resource atelier-cave-dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-cave-dark.min.css
// @resource atelier-cave-light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-cave-light.min.css
// @resource atelier-dune-dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-dune-dark.min.css
// @resource atelier-dune-light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-dune-light.min.css
// @resource atelier-estuary-dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-estuary-dark.min.css
// @resource atelier-estuary-light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-estuary-light.min.css
// @resource atelier-forest-dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-forest-dark.min.css
// @resource atelier-forest-light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-forest-light.min.css
// @resource atelier-heath-dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-heath-dark.min.css
// @resource atelier-heath-light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-heath-light.min.css
// @resource atelier-lakeside-dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-lakeside-dark.min.css
// @resource atelier-lakeside-light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-lakeside-light.min.css
// @resource atelier-plateau-dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-plateau-dark.min.css
// @resource atelier-plateau-light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-plateau-light.min.css
// @resource atelier-savanna-dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-savanna-dark.min.css
// @resource atelier-savanna-light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-savanna-light.min.css
// @resource atelier-seaside-dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-seaside-dark.min.css
// @resource atelier-seaside-light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-seaside-light.min.css
// @resource atelier-sulphurpool-dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-sulphurpool-dark.min.css
// @resource atelier-sulphurpool-light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-sulphurpool-light.min.css
// @resource atom-one-dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css
// @resource atom-one-light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-light.min.css
// @resource brown-paper https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/brown-paper.min.css
// @resource codepen-embed https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/codepen-embed.min.css
// @resource color-brewer https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/color-brewer.min.css
// @resource darcula https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/darcula.min.css
// @resource dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/dark.min.css
// @resource darkula https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/darkula.min.css
// @resource default https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css
// @resource docco https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/docco.min.css
// @resource dracula https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/dracula.min.css
// @resource far https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/far.min.css
// @resource foundation https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/foundation.min.css
// @resource github-gist https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github-gist.min.css
// @resource github https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css
// @resource googlecode https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/googlecode.min.css
// @resource grayscale https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/grayscale.min.css
// @resource gruvbox-dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/gruvbox-dark.min.css
// @resource gruvbox-light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/gruvbox-light.min.css
// @resource hopscotch https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/hopscotch.min.css
// @resource hybrid https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/hybrid.min.css
// @resource idea https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/idea.min.css
// @resource ir-black https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/ir-black.min.css
// @resource kimbie.dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/kimbie.dark.min.css
// @resource kimbie.light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/kimbie.light.min.css
// @resource magula https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/magula.min.css
// @resource mono-blue https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/mono-blue.min.css
// @resource monokai-sublime https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css
// @resource monokai https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai.min.css
// @resource obsidian https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/obsidian.min.css
// @resource ocean https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/ocean.min.css
// @resource paraiso-dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/paraiso-dark.min.css
// @resource paraiso-light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/paraiso-light.min.css
// @resource pojoaque https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/pojoaque.min.css
// @resource purebasic https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/purebasic.min.css
// @resource qtcreator_dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/qtcreator_dark.min.css
// @resource qtcreator_light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/qtcreator_light.min.css
// @resource railscasts https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/railscasts.min.css
// @resource rainbow https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/rainbow.min.css
// @resource routeros https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/routeros.min.css
// @resource school-book https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/school-book.min.css
// @resource solarized-dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css
// @resource solarized-light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css
// @resource sunburst https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css
// @resource tomorrow-night-blue https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/tomorrow-night-blue.min.css
// @resource tomorrow-night-bright https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/tomorrow-night-bright.min.css
// @resource tomorrow-night-eighties https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/tomorrow-night-eighties.min.css
// @resource tomorrow-night https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/tomorrow-night.min.css
// @resource tomorrow https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/tomorrow.min.css
// @resource vs https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/vs.min.css
// @resource vs2015 https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/vs2015.min.css
// @resource xcode https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/xcode.min.css
// @resource xt256 https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/xt256.min.css
// @resource zenburn https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/zenburn.min.css
// ==/UserScript==
(function() {
'use strict';
var timer;
var currentTheme;
function modifyDOM() {
GM_addStyle(`
.hidden { display: none; }
#hljs-switcher > span {
display: flex;
flex-direction: row;
}
#hljs-switcher img {
margin: 0 10px;
}
pre > code {
overflow: auto !important;
margin-bottom: 2em;
padding: 1em !important;
background-color: #F5F0D6 !important;
border: 1px solid #BABAAB !important;
}
`);
var toolbar = document.getElementsByClassName("Header__buttons")[0];
if (toolbar) {
clearTimeout(timer);
var switcher = document.createElement("div");
switcher.setAttribute("id", "hljs-switcher");
switcher.innerHTML = `
<span class="Header__search--desktop">
<img alt="highligh" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAgCAIAAACKIl8oAAABwElEQVRIx71WPUvDUBQ99yZpFVEH6eCgWwUFwS39BSKICCIK/oAuFnTzNzjpKF11Udz8ExV3EcWpigiiaGlr2+Q9h4THaxpbkybeIVxu3jvvvPPO+yDbtpFOmAAqlUriuIVCgZFamCq7upz4Y5/VjTfmzMBmcVi7biMa67XNr7QECcTWcbByvgeiCNARBHFlQqzPSuiiSDA5IeiM9ifUPN7aTF+XVeXFLg7rkGFZ67G89ijcb71iGKMAXjuNm6UdH4g4DnQ2m1O5aDfuSrnQZu8AgIVyPQgtpZRSEhFpFlNFAN6XrZE4ghCREIKImDmAqxKA8of3rtNhZiklJJjJmpoFUG3VhOtWW7WZ7HgXtNfTMAxVcRzHsixfByH8pNN8OJhTbbzpK5/oJunnEH0Ybx4AyMwk4BAppZ77irORP3pmAkAAnPoHET0tbgMQwpVOW41t9sIJITy+ROQh9tky3tr4owqhnzIcMIPC7SUeGgFHhQvSu4xK3z7nrY6r2g/Q+rY4FqjMn3wSm6kcqkjqUFX79T9uGRWnu8hayQoS8br5lfXFfprvkJX1qmVNxobmvu+NZjKsE3+HpHg3UnqP4B/ZuaLIOF8kiwAAAABJRU5ErkJggg==">
<select id="hljs-themes" class="hidden">
<option value="DISABLED">DISABLED</option>
</select>
</span>
`;
toolbar.appendChild(switcher);
switcher.getElementsByTagName("img")[0].addEventListener("click", toggle);
var themes = ["agate", "androidstudio", "arduino-light", "arta", "ascetic", "atelier-cave-dark", "atelier-cave-light", "atelier-dune-dark", "atelier-dune-light", "atelier-estuary-dark", "atelier-estuary-light", "atelier-forest-dark", "atelier-forest-light", "atelier-heath-dark", "atelier-heath-light", "atelier-lakeside-dark", "atelier-lakeside-light", "atelier-plateau-dark", "atelier-plateau-light", "atelier-savanna-dark", "atelier-savanna-light", "atelier-seaside-dark", "atelier-seaside-light", "atelier-sulphurpool-dark", "atelier-sulphurpool-light", "atom-one-dark", "atom-one-light", "brown-paper", "codepen-embed", "color-brewer", "darcula", "dark", "darkula", "default", "docco", "dracula", "far", "foundation", "github-gist", "github", "googlecode", "grayscale", "gruvbox-dark", "gruvbox-light", "hopscotch", "hybrid", "idea", "ir-black", "kimbie.dark", "kimbie.light", "magula", "mono-blue", "monokai-sublime", "monokai", "obsidian", "ocean", "paraiso-dark", "paraiso-light", "pojoaque", "purebasic", "qtcreator_dark", "qtcreator_light", "railscasts", "rainbow", "routeros", "school-book", "solarized-dark", "solarized-light", "sunburst", "tomorrow-night-blue", "tomorrow-night-bright", "tomorrow-night-eighties", "tomorrow-night", "tomorrow", "vs", "vs2015", "xcode", "xt256", "zenburn"];
var themeSelect = switcher.getElementsByTagName('select')[0];
var currentThemeName = GM_getValue('theme');
themes.forEach(function(theme) {
var opt = document.createElement("option");
opt.value= theme;
opt.innerHTML = theme;
opt.selected = (theme == currentThemeName);
themeSelect.appendChild(opt);
});
themeSelect.addEventListener("change", function() {
switchTheme(themeSelect.options[themeSelect.selectedIndex].value);
});
}
}
function toggle() {
document.getElementById("hljs-themes").classList.toggle("hidden");
}
function switchTheme(theme) {
if (currentTheme) { currentTheme.remove(); }
if (theme == "DISABLED") { return; }
var cssStr = GM_getResourceText(theme);
const regex = /(background:#.{6})/g;
const subst = `$1 !important`;
cssStr = cssStr.replace(regex, subst);
currentTheme = GM_addStyle(cssStr);
GM_setValue('theme', theme);
}
switchTheme(GM_getValue('theme') || 'github');
timer = setInterval(modifyDOM, 1000);
hljs.initHighlightingOnLoad();
})();