☰

GitHub Code Colors

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

目前为 2016-03-25 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name          GitHub Code Colors
  3. // @version       1.0.0
  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.   addColors = function() {
  43.     busy = true;
  44.     if (document.querySelector(".highlight")) {
  45.       var addNode, loop,
  46.       indx = 0,
  47.       regexNamed = new RegExp("^(" + namedColors + ")$"),
  48.       // #123 or #123456
  49.       regexHex = /^#([0-9A-F]{6}|[0-9A-F]{3})$/i,
  50.       // rgb(0,0,0) or rgba(0,0,0,0.2)
  51.       regexRGB = /^rgba?$/i,
  52.       // hsl(0,0%,0%) or hsla(0,0%,0%,0.2);
  53.       regexHSL = /^hsla?$/i,
  54.  
  55.       els = document.querySelectorAll(".pl-c1"),
  56.       len = els.length,
  57.  
  58.       // don't use a div, because GitHub-Dark adds a :hover background color definition on divs
  59.       block = document.createElement("span");
  60.       block.className = "ghcc-block";
  61.  
  62.       addNode = function(el, val) {
  63.         var node = block.cloneNode();
  64.         node.style.backgroundColor = val;
  65.         el.insertBefore(node, el.childNodes[0]);
  66.       };
  67.  
  68.       // loop with delay to allow user interaction
  69.       loop = function() {
  70.         var el, txt, tmp,
  71.         // max number of DOM insertions per loop
  72.         max = 0;
  73.         while ( max < 20 && indx < len ) {
  74.           if (indx >= len) { return; }
  75.           el = els[indx];
  76.           txt = el.textContent;
  77.           if (regexHex.test(txt) || regexNamed.test(txt)) {
  78.             if (!el.querySelector(".ghcc-block")) {
  79.               addNode(el, txt);
  80.               max++;
  81.             }
  82.           } else if (regexRGB.test(txt)) {
  83.             if (!el.querySelector(".ghcc-block")) {
  84.               addNode(el, txt += "(" + els[++indx].textContent + ")");
  85.               max++;
  86.             }
  87.           } else if (regexHSL.test(txt)) {
  88.             if (!el.querySelector(".ghcc-block")) {
  89.               tmp = /a$/i.test(txt);
  90.               // traverse this HTML... & els only contains the pl-c1 nodes
  91.               // <span class="pl-c1">hsl</span>(<span class="pl-c1">1</span>,
  92.               // <span class="pl-c1">1</span><span class="pl-k">%</span>,
  93.               // <span class="pl-c1">1</span><span class="pl-k">%</span>);
  94.               txt += "(" + els[++indx].textContent + "," + els[++indx].textContent + "%," +
  95.                 els[++indx].textContent + "%" + (tmp ? "," + els[++indx].textContent : "") + ")";
  96.               // sometimes (previews only?) the .pl-k span is nested inside the .pl-c1 span,
  97.               // so we end up with "%%"
  98.               addNode(el, txt.replace(/%%/g, "%"));
  99.               max++;
  100.             }
  101.           }
  102.           indx++;
  103.         }
  104.         if (indx < len) {
  105.           setTimeout(function(){
  106.             loop();
  107.           }, 200);
  108.         }
  109.       };
  110.       loop();
  111.     }
  112.     busy = false;
  113.   },
  114.   targets = document.querySelectorAll("#js-repo-pjax-container, #js-pjax-container, .js-preview-body");
  115.  
  116.   Array.prototype.forEach.call(targets, function(target) {
  117.     new MutationObserver(function(mutations) {
  118.       mutations.forEach(function(mutation) {
  119.         // preform checks before adding code wrap to minimize function calls
  120.         if (!busy && mutation.target === target) {
  121.           addColors();
  122.         }
  123.       });
  124.     }).observe(target, {
  125.       childList: true,
  126.       subtree: true
  127.     });
  128.   });
  129.  
  130.   addColors();
  131.  
  132. })();