☰

GitLab Code Show Whitespace

A userscript that shows whitespace (space, tabs and carriage returns) in code blocks based on https://github.com/Mottie/GitHub-userscripts/wiki/GitHub-code-show-whitespace (without mutations)

  1. // ==UserScript==
  2. // @name        GitLab Code Show Whitespace
  3. // @version     1.1.10-a
  4. // @description A userscript that shows whitespace (space, tabs and carriage returns) in code blocks based on https://github.com/Mottie/GitHub-userscripts/wiki/GitHub-code-show-whitespace (without mutations)
  5. // @license     MIT
  6. // @author      Nikolai Merinov
  7. // @namespace   https://github.com/mnd
  8. // @include     https://gitlab.*
  9. // @run-at      document-idle
  10. // @grant       GM.addStyle
  11. // @grant       GM_addStyle
  12. // @require     https://greasemonkey.github.io/gm4-polyfill/gm4-polyfill.js?updated=20180103
  13. // @icon        https://assets-cdn.github.com/pinned-octocat.svg
  14. // ==/UserScript==
  15. (() => {
  16.     "use strict";
  17.  
  18.     // include em-space & en-space?
  19.     const whitespace = {
  20. 	// Applies \xb7 (·) to every space
  21. 	"%20"  : "<span class='pl-space ghcw-whitespace'> </span>",
  22. 	// Applies \xb7 (·) to every non-breaking space (alternative: \u2423 (␣))
  23. 	"%A0"  : "<span class='pl-nbsp ghcw-whitespace'>&nbsp;</span>",
  24. 	// Applies \xbb (») to every tab
  25. 	"%09"  : "<span class='pl-tab ghcw-whitespace'>\x09</span>",
  26. 	// non-matching key; applied manually
  27. 	// Applies \u231d (⌝) to the end of every line
  28. 	// (alternatives: \u21b5 (↵) or \u2938 (⤸))
  29. 	"CRLF" : "<span class='pl-crlf ghcw-whitespace'></span>"
  30.     },
  31. 	  span = document.createElement("span"),
  32. 	  // ignore +/- in diff code blocks
  33. 	  regexWS = /(\x20|&nbsp;|\x09)/g,
  34. 	  regexCR = /\r*\n$/,
  35. 	  regexExceptions = /(\.md)$/i,
  36.  
  37. 	  toggleButton = document.createElement("div");
  38.     toggleButton.className = "ghcw-toggle btn has-tooltip btn-file-option";
  39.     toggleButton.setAttribute("aria-label", "Toggle Whitespace");
  40.     toggleButton.innerHTML = "<span class='pl-tab'></span>";
  41.  
  42.     GM.addStyle(`
  43. 		.ghcw-active .ghcw-whitespace,
  44. 		.gist-content-wrapper .file-actions .btn-group {
  45. 			position: relative;
  46. 			display: inline;
  47. 		}
  48. 		.ghcw-active .ghcw-whitespace:before {
  49. 			position: absolute;
  50. 			opacity: .5;
  51. 			user-select: none;
  52. 			font-weight: bold;
  53. 			color: #777 !important;
  54. 			top: -.25em;
  55. 			left: 0;
  56. 		}
  57. 		.ghcw-toggle .pl-tab {
  58. 			pointer-events: none;
  59. 		}
  60. 		.ghcw-active .pl-space:before {
  61. 			content: "\\b7";
  62. 		}
  63. 		.ghcw-active .pl-nbsp:before {
  64. 			content: "\\b7";
  65. 		}
  66. 		.ghcw-active .pl-tab:before,
  67. 		.ghcw-toggle .pl-tab:before {
  68. 			content: "\\bb";
  69. 			top: .1em;
  70. 		}
  71. 		.ghcw-active .pl-crlf:before {
  72. 			content: "\\231d";
  73. 		}
  74. 		/* weird tweak for diff markdown files - see #27 */
  75. 		.ghcw-adjust .ghcw-active .ghcw-whitespace:before {
  76. 			left: .6em;
  77. 		}
  78. 		/* hide extra leading space added to diffs - see #27 */
  79. 		.text-file td.line .pl-space:first-child {
  80. 			opacity: 0;
  81. 		}
  82. 	`);
  83.  
  84.     
  85.     function $(selector, el) {
  86. 	return (el || document).querySelector(selector);
  87.     }
  88.  
  89.     function $$(selector, el) {
  90. 	return [...(el || document).querySelectorAll(selector)];
  91.     }
  92.  
  93.     function addToggle() {
  94. 	$$(".file-actions").forEach(el => {
  95. 	    if (!$(".ghcw-toggle", el)) {
  96. 		el.insertBefore(toggleButton.cloneNode(true), el.childNodes[0]);
  97. 	    }
  98. 	});
  99.     }
  100.  
  101.     function getNodes(line) {
  102. 	const nodeIterator = document.createNodeIterator(
  103. 	    line,
  104. 	    NodeFilter.SHOW_TEXT,
  105. 	    () => NodeFilter.FILTER_ACCEPT
  106. 	);
  107. 	let currentNode,
  108. 	    nodes = [];
  109. 	while ((currentNode = nodeIterator.nextNode())) {
  110. 	    nodes.push(currentNode);
  111. 	}
  112. 	return nodes;
  113.     }
  114.  
  115.     function escapeHTML(html) {
  116. 	return html.replace(/[<>"'&]/g, m => ({
  117. 	    "<": "&lt;",
  118. 	    ">": "&gt;",
  119. 	    "&": "&amp;",
  120. 	    "'": "&#39;",
  121. 	    "\"": "&quot;"
  122. 	}[m]));
  123.     }
  124.  
  125.     function replaceWhitespace(html) {
  126. 	return escapeHTML(html).replace(regexWS, s => {
  127. 	    let idx = 0,
  128. 		ln = s.length,
  129. 		result = "";
  130. 	    for (idx = 0; idx < ln; idx++) {
  131. 		result += whitespace[encodeURI(s[idx])] || s[idx] || "";
  132. 	    }
  133. 	    return result;
  134. 	});
  135.     }
  136.  
  137.     function replaceTextNode(nodes) {
  138. 	let node, indx, el,
  139. 	    ln = nodes.length;
  140. 	for (indx = 0; indx < ln; indx++) {
  141. 	    node = nodes[indx];
  142. 	    if (
  143. 		node &&
  144. 		    node.nodeType === 3 &&
  145. 		    node.textContent &&
  146. 		    node.textContent.search(regexWS) > -1
  147. 	    ) {
  148. 		el = span.cloneNode();
  149. 		el.innerHTML = replaceWhitespace(node.textContent.replace(regexCR, ""));
  150. 		node.parentNode.insertBefore(el, node);
  151. 		node.parentNode.removeChild(node);
  152. 	    }
  153. 	}
  154.     }
  155.  
  156.     function addWhitespace(block) {
  157. 	let lines, indx, len;
  158. 	if (block && !block.classList.contains("ghcw-processed")) {
  159. 	    block.classList.add("ghcw-processed");
  160. 	    indx = 0;
  161.  
  162. 	    // class name of each code row
  163. 	    lines = $$(".line", block);
  164. 	    len = lines.length;
  165.  
  166. 	    // loop with delay to allow user interaction
  167. 	    const loop = () => {
  168. 		let line, nodes,
  169. 		    // max number of DOM insertions per loop
  170. 		    max = 0;
  171. 		while (max < 50 && indx < len) {
  172. 		    if (indx >= len) {
  173. 			return;
  174. 		    }
  175. 		    line = lines[indx];
  176. 		    // first node is a syntax string and may have leading whitespace
  177. 		    nodes = getNodes(line);
  178. 		    replaceTextNode(nodes);
  179. 		    // remove end CRLF if it exists; then add a line ending
  180. 		    line.innerHTML = line.innerHTML.replace(regexCR, "") + whitespace.CRLF;
  181. 		    max++;
  182. 		    indx++;
  183. 		}
  184. 		if (indx < len) {
  185. 		    setTimeout(() => {
  186. 			loop();
  187. 		    }, 100);
  188. 		}
  189. 	    };
  190. 	    loop();
  191. 	}
  192.     }
  193.  
  194.     function detectDiff(wrap) {
  195. 	const header = $(".btn-clipboard", wrap);
  196. 	if ($(".diff-content", wrap) && header) {
  197. 	    const file = header.getAttribute("data-clipboard-text");
  198. 	    if (
  199. 		// File Exceptions that need tweaking (e.g. ".md")
  200. 		regexExceptions.test(file) ||
  201. 		    // files with no extension (e.g. LICENSE)
  202. 		    file.indexOf(".") === -1
  203. 	    ) {
  204. 		// This class is added to adjust the position of the whitespace
  205. 		// markers for specific files; See issue #27
  206. 		wrap.classList.add("ghcw-adjust");
  207. 	    }
  208. 	}
  209.     }
  210.  
  211.     // bind whitespace toggle button
  212.     document.addEventListener("click", event => {
  213. 	const target = event.target;
  214. 	if (
  215. 	    target.nodeName === "DIV" &&
  216. 		target.classList.contains("ghcw-toggle")
  217. 	) {
  218. 	    const wrap = target.closest(".diff-file");
  219. 	    const block = $(".text-file", wrap); // diff-content
  220. 	    if (block) {
  221. 		target.classList.toggle("selected");
  222. 		block.classList.toggle("ghcw-active");
  223. 		detectDiff(wrap);
  224. 		addWhitespace(block);
  225. 	    }
  226. 	}
  227.     });
  228.  
  229.     // Add toggle every second to be sure that it will start after each update
  230.     setInterval(addToggle, 1000);
  231.     // toggle added to diff & file view
  232.     addToggle();
  233. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址