Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// ==UserScript==
// @name github-wrap-toggle
// @namespace silverwind
// @include /^https?://github.com/
// @version 1
// @grant GM_addStyle
// ==/UserScript==
var $ = document.querySelectorAll.bind(document);
NodeList.prototype.__proto__ = Array.prototype;
var active = localStorage.getItem("github-wrap-toggle") === "1";
var icon = '<svg class="github-wrap-toggle' + (active ? " active" : "") + '" xmlns="http://www.w3.org/2000/svg" width="768" height="768" viewBox="0 0 768 768"><path d="M544.5 352.5q52.5 0 90 37.5t37.5 90-37.5 90-90 37.5H480V672l-96-96 96-96v64.5h72q25.5 0 45-19.5t19.5-45-19.5-45-45-19.5H127.5v-63h417zm96-192v63h-513v-63h513zm-513 447v-63h192v63h-192z"/></svg>';
GM_addStyle([
".github-wrap-toggle {position:absolute; top: .25em; right: .25em; height: 1.25em; width: 1.25em; fill: rgba(255,255,255,.4); -moz-user-select: none; -webkit-user-select: none}",
".github-wrap-toggle.active {fill: rgba(255,255,255,.8)}",
].join("\n"));
$(".markdown-body > pre").forEach(function (el) {
el.style.position = "relative";
el.insertAdjacentHTML("beforeend", icon);
});
function toggleStyle(el) {
var code = el.parentNode.querySelectorAll("code")[0];
code.style.whiteSpace = active ? "pre-wrap" : "";
code.style.wordBreak = active ? "break-all" : "";
code.style.display = active ? "block" : "";
}
$(".github-wrap-toggle").forEach(function (el) {
el.addEventListener("click", function () {
active = !active;
this.classList[active ? "add" : "remove"]("active");
localStorage.setItem("github-wrap-toggle", active ? "1" : "0")
toggleStyle(el);
});
toggleStyle(el);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment