GitHub Code Colors

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

当前为 2017-03-29 提交的版本,查看 最新版本

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

QingJ © 2025

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