GitHub Code Colors

A userscript that adds a color swatch next to the code color definition

当前为 2016-04-11 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name GitHub Code Colors
  3. // @version 1.0.1
  4. // @description A userscript that adds a color swatch next to the code color definition
  5. // @license https://creativecommons.org/licenses/by-sa/4.0/
  6. // @namespace http://github.com/Mottie
  7. // @include https://github.com/*
  8. // @grant GM_addStyle
  9. // @run-at document-idle
  10. // @author Rob Garrison
  11. // ==/UserScript==
  12. /* global GM_addStyle */
  13. (function() {
  14. "use strict";
  15.  
  16. GM_addStyle(".ghcc-block { width:12px; height:12px; display:inline-block; vertical-align:middle; margin-right:4px; border:1px solid #555; }");
  17.  
  18. var busy = false,
  19.  
  20. namedColors = [
  21. "aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige", "bisque", "black", "blanchedalmond",
  22. "blue", "blueviolet", "brown", "burlywood", "cadetblue", "chartreuse", "chocolate", "coral",
  23. "cornflowerblue", "cornsilk", "crimson", "cyan", "darkblue", "darkcyan", "darkgoldenrod", "darkgray",
  24. "darkgreen", "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred",
  25. "darksalmon", "darkseagreen", "darkslateblue", "darkslategray", "darkturquoise", "darkviolet", "deeppink",
  26. "deepskyblue", "dimgray", "dodgerblue", "firebrick", "floralwhite", "forestgreen", "fuchsia", "gainsboro",
  27. "ghostwhite", "gold", "goldenrod", "gray", "green", "greenyellow", "honeydew", "hotpink", "indianred",
  28. "indigo", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue",
  29. "lightcoral", "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightpink", "lightsalmon",
  30. "lightseagreen", "lightskyblue", "lightslategray", "lightsteelblue", "lightyellow", "lime", "limegreen",
  31. "linen", "magenta", "maroon", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurple",
  32. "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise", "mediumvioletred",
  33. "midnightblue", "mintcream", "mistyrose", "moccasin", "navajowhite", "navy", "oldlace", "olive",
  34. "olivedrab", "orange", "orangered", "orchid", "palegoldenrod", "palegreen", "paleturquoise",
  35. "palevioletred", "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue", "purple",
  36. "rebeccapurple", "red", "rosybrown", "royalblue", "saddlebrown", "salmon", "sandybrown", "seagreen",
  37. "seashell", "sienna", "silver", "skyblue", "slateblue", "slategray", "snow", "springgreen", "steelblue",
  38. "tan", "teal", "thistle", "tomato", "turquoise", "violet", "wheat", "white", "whitesmoke", "yellow",
  39. "yellowgreen"
  40. ].join("|"),
  41.  
  42. hasClass = function(el, name) {
  43. if (el) {
  44. return el.classList ? el.classList.contains(name) : new RegExp("\\b" + name + "\\b").test(el.className);
  45. }
  46. return false;
  47. },
  48.  
  49. addColors = function() {
  50. busy = true;
  51. if (document.querySelector(".highlight")) {
  52. var addNode, loop,
  53. indx = 0,
  54. regexNamed = new RegExp("^(" + namedColors + ")$", "i"),
  55. // #123, #123456 or 0x123456 (unix style colors, used by three.js)
  56. regexHex = /^(#|0x)([0-9A-F]{6}|[0-9A-F]{3})$/i,
  57. // rgb(0,0,0) or rgba(0,0,0,0.2)
  58. regexRGB = /^rgba?(\([^\)]+\))?/i,
  59. // hsl(0,0%,0%) or hsla(0,0%,0%,0.2);
  60. regexHSL = /^hsla?(\([^\)]+\))?/i,
  61.  
  62. // misc regex
  63. regexQuotes = /[\'\"]/g,
  64. regexUnix = /^0x/,
  65. regexPercent = /%%/g,
  66.  
  67. // .pl-c1 targets css hex colors, "rgb" and "hsl"
  68. els = document.querySelectorAll(".pl-c1, .pl-s"),
  69. len = els.length,
  70.  
  71. // don't use a div, because GitHub-Dark adds a :hover background color definition on divs
  72. block = document.createElement("span");
  73. block.className = "ghcc-block";
  74.  
  75. addNode = function(el, val) {
  76. var node = block.cloneNode();
  77. node.style.backgroundColor = val;
  78. // don't add node if color is invalid
  79. if (node.style.backgroundColor !== "") {
  80. el.insertBefore(node, el.childNodes[0]);
  81. }
  82. };
  83.  
  84. // loop with delay to allow user interaction
  85. loop = function() {
  86. var el, txt, tmp,
  87. // max number of DOM insertions per loop
  88. max = 0;
  89. while ( max < 20 && indx < len ) {
  90. if (indx >= len) { return; }
  91. el = els[indx];
  92. txt = el.textContent;
  93. if (hasClass(el, "pl-s")) {
  94. txt = txt.replace(regexQuotes, "");
  95. }
  96. if (regexHex.test(txt) || regexNamed.test(txt)) {
  97. if (!el.querySelector(".ghcc-block")) {
  98. addNode(el, txt.replace(regexUnix, "#"));
  99. max++;
  100. }
  101. } else if (regexRGB.test(txt)) {
  102. if (!el.querySelector(".ghcc-block")) {
  103. txt = hasClass(el, "pl-s") ?
  104. // color in a string contains everything
  105. txt.match(regexRGB)[0] :
  106. txt + "(" + els[++indx].textContent + ")";
  107. addNode(el, txt);
  108. max++;
  109. }
  110. } else if (regexHSL.test(txt)) {
  111. if (!el.querySelector(".ghcc-block")) {
  112. tmp = /a$/i.test(txt);
  113. txt = hasClass(el, "pl-s") ?
  114. // color in a string contains everything
  115. txt.match(regexHSL)[0] :
  116. // traverse this HTML... & els only contains the pl-c1 nodes
  117. // <span class="pl-c1">hsl</span>(<span class="pl-c1">1</span>,
  118. // <span class="pl-c1">1</span><span class="pl-k">%</span>,
  119. // <span class="pl-c1">1</span><span class="pl-k">%</span>);
  120. txt + "(" + els[++indx].textContent + "," + els[++indx].textContent + "%," +
  121. // hsla needs one more parameter
  122. els[++indx].textContent + "%" + (tmp ? "," + els[++indx].textContent : "") + ")";
  123. // sometimes (previews only?) the .pl-k span is nested inside the .pl-c1 span,
  124. // so we end up with "%%"
  125. addNode(el, txt.replace(regexPercent, "%"));
  126. max++;
  127. }
  128. }
  129. indx++;
  130. }
  131. if (indx < len) {
  132. setTimeout(function(){
  133. loop();
  134. }, 200);
  135. }
  136. };
  137. loop();
  138. }
  139. busy = false;
  140. },
  141. targets = document.querySelectorAll("#js-repo-pjax-container, #js-pjax-container, .js-preview-body");
  142.  
  143. Array.prototype.forEach.call(targets, function(target) {
  144. new MutationObserver(function(mutations) {
  145. mutations.forEach(function(mutation) {
  146. // preform checks before adding code wrap to minimize function calls
  147. if (!busy && mutation.target === target) {
  148. addColors();
  149. }
  150. });
  151. }).observe(target, {
  152. childList: true,
  153. subtree: true
  154. });
  155. });
  156.  
  157. addColors();
  158.  
  159. })();

QingJ © 2025

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