☰

Github color preview

Adds colour to github gutter if the line contains a hex color code

  1. // ==UserScript==
  2. // @name         Github color preview
  3. // @author       Afzal Najam
  4. // @namespace    http://afzaln.com/
  5. // @version      1.0
  6. // @description  Adds colour to github gutter if the line contains a hex color code
  7. // @match        https://*.github.com/*
  8. // @copyright    2014+, Afzal Najam
  9. // ==/UserScript==
  10.  
  11. rows = $('.file > .blob-wrapper > table > tbody > tr');
  12. GM_addStyle ( ".blob-line-num { width:6% !important }" );
  13. rows.each(function (index) {
  14.     lineNum = $(this).find('.blob-line-num');
  15.     lineText = $(this).find('.blob-line-code').text();
  16.     var patt = /#([0-9A-F]{2})?([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})/i;
  17.     var colors = patt.exec(lineText);
  18.     if (colors != null) {
  19. //        GM_log(colors);
  20.         if (colors[1]) {
  21.           var opacity = parseInt(colors[1], 16)/255;
  22.         } else {
  23.             var opacity = 1;
  24.         }
  25.         var r = parseInt(colors[2], 16);
  26.         var g = parseInt(colors[3], 16);
  27.         var b = parseInt(colors[4], 16);
  28.         var colordiv = "<div style=\"float:left; display:inline; background: rgb(" + r + "," + g + "," + b + "); opacity: " + opacity + "; height: 14px; width: 8px\"></div>";
  29.         lineNum.append(colordiv);
  30.     }
  31. });