userstyles.org css highlighter

Formats and highlights CSS code shown after [Show CSS] clicking.
As of 2017-10-20. See the latest version.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name        userstyles.org css highlighter
// @namespace   trespassersW
// @version     2017.10.20
// @description Formats and highlights CSS code shown after [Show CSS] clicking.
// @author      trespassersW
// @contributor darkred
//
// @license     MIT License
// @released    2013-11-20
// @updated     2017-10-20
//
// 2017.10.19 Modified by darkred to work in the new userstyles.org layout.
// 16.08.28 + keeps highliting status between sessions; 16.08.28.1 - some instead of each
// 2.1.1 2016-01-04 + ctrl-clik copies CSS code to clipboard
// 2.0.1 cut extra empty lines
// 2.0 dark grey background;
// 1.3 icons for toggle button; tiny optimization
// 1.1 fresh versions of formater/hiliter; switching  butifying on/off; fixed &lt;/&amp; issue
//
// @include     http://userstyles.org/styles/*
// @include     https://userstyles.org/styles/*
// /include     file:///E:/userscripts.org/styles/*
// @include     http://web.archive.org/web/20170222172435/https://userstyles.org/styles/118959/darksearch-for-google
// @require     https://greasyfork.org/scripts/21927-arrive-js/code/arrivejs.js?version=139586
// @grant       GM_setClipboard
// ==/UserScript==
 
/* eslint-disable */
 
document.arrive('#button_middle > .css_button', function () {
 
 
 
(function () { "use strict";
 
 
var Light  = 0, Dark = 1 ;
// choose color scheme according to your taste:
var   scheme = 1 ; // 0 for light; 1 for dark
 
//function _L(s){console.log(s);}
var sb;
 
 if( location.href.indexOf("s.org/styles/") <0 ||
    !(sb=document.querySelector("#button_middle > .css_button") )
 ) { return;} // else alert();
 
 
 
 
 var bt,tc,sc,vc, highlighted;
 var hiId="<!--userstyles.org css highlighter-->";
 
// CSSBeautify (C) 2013 Sencha Inc. Author: Ariya Hidayat.
(function(){function a(s,f){var h,m=0,i=s.length,t,e="",p,g,q,k,o,y,u,d,r=true,j=false,n;h=arguments.length>1?f:{};if(typeof h.indent==="undefined"){h.indent="    ";}if(typeof h.openbrace==="string"){r=(h.openbrace==="end-of-line");}if(typeof h.autosemicolon==="boolean"){j=h.autosemicolon;}function l(z){return(z===" ")||(z==="\n")||(z==="\t")||(z==="\r")||(z==="\f");}function b(z){return(z==="'")||(z==='"');}function c(z){return(p>="a"&&p<="z")||(p>="A"&&p<="Z")||(p>="0"&&p<="9")||"-_*.:#[]".indexOf(z)>=0;}function x(){var z;for(z=y;z>0;z-=1){e+=h.indent;}}function w(){e=n(e);if(r){e+=" {";}else{e+="\n";x();e+="{";}if(g!=="\n"){e+="\n";}y+=1;}function v(){var z;y-=1;e=n(e);if(e.length>0&&j){z=e.charAt(e.length-1);if(z!==";"&&z!=="{"){e+=";";}}e+="\n";x();e+="}";t.push(e);e="";}if(String.prototype.trimRight){n=function(z){return z.trimRight();};}else{n=function(z){return z.replace(/\s+$/,"");};}o={Start:0,AtRule:1,Block:2,Selector:3,Ruleset:4,Property:5,Separator:6,Expression:7,URL:8};y=0;k=o.Start;d=false;t=[];s=s.replace(/\r\n/g,"\n");while(m<i){p=s.charAt(m);g=s.charAt(m+1);m+=1;if(b(u)){e+=p;if(p===u){u=null;}if(p==="\\"&&g===u){e+=g;m+=1;}continue;}if(b(p)){e+=p;u=p;continue;}if(d){e+=p;if(p==="*"&&g==="/"){d=false;e+=g;m+=1;}continue;}if(p==="/"&&g==="*"){d=true;e+=p;e+=g;m+=1;continue;}if(k===o.Start){if(t.length===0){if(l(p)&&e.length===0){continue;}}if(p<=" "||p.charCodeAt(0)>=128){k=o.Start;e+=p;continue;}if(c(p)||(p==="@")){q=n(e);if(q.length===0){if(t.length>0){e="\n\n";}}else{if(q.charAt(q.length-1)==="}"||q.charAt(q.length-1)===";"){e=q+"\n\n";}else{while(true){g=e.charAt(e.length-1);if(g!==" "&&g.charCodeAt(0)!==9){break;}e=e.substr(0,e.length-1);}}}e+=p;k=(p==="@")?o.AtRule:o.Selector;continue;}}if(k===o.AtRule){if(p===";"){e+=p;k=o.Start;continue;}if(p==="{"){q=n(e);w();k=(q==="@font-face")?o.Ruleset:o.Block;continue;}e+=p;continue;}if(k===o.Block){if(c(p)){q=n(e);if(q.length===0){if(t.length>0){e="\n\n";}}else{if(q.charAt(q.length-1)==="}"){e=q+"\n\n";}else{while(true){g=e.charAt(e.length-1);if(g!==" "&&g.charCodeAt(0)!==9){break;}e=e.substr(0,e.length-1);}}}x();e+=p;k=o.Selector;continue;}if(p==="}"){v();k=o.Start;continue;}e+=p;continue;}if(k===o.Selector){if(p==="{"){w();k=o.Ruleset;continue;}if(p==="}"){v();k=o.Start;continue;}e+=p;continue;}if(k===o.Ruleset){if(p==="}"){v();k=o.Start;if(y>0){k=o.Block;}continue;}if(p==="\n"){e=n(e);e+="\n";continue;}if(!l(p)){e=n(e);e+="\n";x();e+=p;k=o.Property;continue;}e+=p;continue;}if(k===o.Property){if(p===":"){e=n(e);e+=": ";k=o.Expression;if(l(g)){k=o.Separator;}continue;}if(p==="}"){v();k=o.Start;if(y>0){k=o.Block;}continue;}e+=p;continue;}if(k===o.Separator){if(!l(p)){e+=p;k=o.Expression;continue;}if(b(g)){k=o.Expression;}continue;}if(k===o.Expression){if(p==="}"){v();k=o.Start;if(y>0){k=o.Block;}continue;}if(p===";"){e=n(e);e+=";\n";k=o.Ruleset;continue;}e+=p;if(p==="("){if(e.charAt(e.length-2)==="l"&&e.charAt(e.length-3)==="r"&&e.charAt(e.length-4)==="u"){k=o.URL;continue;}}continue;}if(k===o.URL){if(p===")"&&e.charAt(e.length-1!=="\\")){e+=p;k=o.Expression;continue;}}e+=p;}e=t.join("")+e;return e;}if(typeof exports!=="undefined"){module.exports=exports=a;}else{if(typeof window==="object"){window.cssbeautify=a;}}}());
// Prism (c) Lea Verou, MIT License
(function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var r={};for(var i in e){e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]))}return r;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n){r[i]=n[i]}return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s){if(s.hasOwnProperty(u)){if(u==n){for(var a in r){r.hasOwnProperty(a)&&(o[a]=r[a])}}o[u]=s[u]}}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}}},highlight:function(e,r){return n.stringify(t.tkize(e,r))},tkize:function(e,n){var r=t.tk,i=[e],s=n.rest;if(s){for(var o in s){n[o]=s[o]}delete n.rest}e:for(var o in n){if(!n.hasOwnProperty(o)||!n[o]){continue}var u=n[o],a=u.inside,f=!!u.lookbehind||0;u=u.pattern||u;for(var l=0;l<i.length;l++){var c=i[l];if(i.length>e.length){break e}if(c instanceof r){continue}u.lastIndex=0;var h=u.exec(c);if(h){f&&(f=h[1].length);var p=h.index-1+f,h=h[0].slice(f),d=h.length,v=p+d,m=c.slice(0,p+1),g=c.slice(v+1),y=[l,1];m&&y.push(m);var b=new r(o,a?t.tkize(h,a):h);y.push(b);g&&y.push(g);Array.prototype.splice.apply(i,y)}}}return i},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length){return}for(var i=0,s;s=r[i++];){s(n)}}}},n=t.tk=function(e,t){this.type=e;this.content=t};n.stringify=function(e){if(typeof e=="string"){return e}if(Object.prototype.toString.call(e)=="[object Array]"){return e.map(n.stringify).join("")}var r={type:e.type,content:n.stringify(e.content),tag:"span",classes:["tk",e.type],attributes:{}};t.hooks.run("wrap",r);var i="";for(var s in r.attributes){i+=s+'="'+(r.attributes[s]||"")+'"'}return"<"+r.tag+' class="'+r.classes.join(" ")+'" '+i+">"+r.content+"</"+r.tag+">"}})();
 
Prism.languages.css = {
  com: /\/\*[\w\W]*?\*\//g, // whose guilt?
  atr: /@[\w-]+?(\s+[^;{]+)?(?=\s*{|\s*;)/gi,
  url: /url\((["']?).*?\1\)/gi,
  sel: /[^\{\}\s][^\{\}]*(?=\s*\{)/g,
  pro: /(\b|\B)[a-z-]+(?=\s*:)/ig,
  str: /("|')(\\?.)*?\1/g,
  imp: /!important\b/gi,
  pun: /[\{\};:]/g
};
 
/*
.com comment, .atr at-rule, .sel selector, .imp !important,
.pun punctuation, .url url, .str string
*/
var prismCSS;
if( scheme==Dark ) {
prismCSS = `
.tk.com {
  color:#69A;
}
.tk.pun {
  color:#8FC;
}
.tk.pro {
  color:#5cf;
}
.tk.sel {
  color:#7F5;
}
.tk.str {
  color:#F63;
}
.tk.atr {
  color:#F8C;
}
.tk.imp {
  color:#e90;
}
.tk.url{
  color:#B87;
}
#css_text_area_div.hiBeautted {
background-color:#293134 !important;
color: #e0e2e4 !important;}
`} else {
prismCSS = `
.tk.com {
  color:slategray;
}
.tk.pun {
  color:#488;
}
.tk.pro {
  color:#05A;
}
.tk.sel {
  color:#470;
}
.tk.str {
  color:#E30;
}
.tk.atr {
  color:#905;
}
.tk.imp {
  color:#e90;
/*font-weight:bold;*/
}
.tk.url{
  color:#a75;
}
`
}
 
prismCSS+=`
#css_text_area_div {padding: 1.2em .8em !important;}
#css_text_area_div.hiBeautted {white-space: pre-wrap !important; word-wrap: break-word!important;
}
#hiBeauty:before{
content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAC4jAAAuIwF4pT92AAACjklEQVR42pXTz0/TYBgH8Nf/gaMJhoAXZzx7NhJviiZ6wmiWXRbRxBjjSYEQN8PPjbGxsWwgOjQYCVHWQoQM2IYDYbCta1e6tfvRTRMVjffnsW9HFkGzuMPnfd68ab79vk1KfD7fYrlcxv8lCAJWKhWUZVnfh8PhXwaD4TLxer2LqqoCRR88vv/zjFIUBXmeh0P6fmRkhCETExOsWiyAkt6jMC+k6gb962Xj4+MM8Xg8bCnowwNrh+6bpQOLyS1s5Loul4shbrebLc874EdPO4V0FncjDTVyOp0M0Wqx6pshOHh0nsLv2izurDceRGup2yH4/KJH042VQB+ostRQ0NjYWDVISb7H3LK5aqULC1kO0+5V5B0hnbS0W/cb6UF0KcSeQeXdOQrplOPLIN5dwOw9BjQouSN1GzkcjmqQEu3D0tvWGnlnCfnbcyga56vsa3UbjY6OMoSmybFhkAInKZRmTkGe24BE5ywmb7wGDWac63Ub6UF0kQoShDNrFEbFMJTUEixnshjkJdBgUslDWlAgFN2nMLol/R1kt9uZQHoazbvGmlUxhmciGTTEsrr7cRGHn+fwVndRd/NxDmWlVLuazWYLEvqf+FNe6Ny6TiGdH4QItK0ksC3EwekQh12bPDz15uDaQ4XCqw+ykJVLtUYDAwMsGRwcZNx7TrgSuUQhnUv8OjQHN7F5cRs0aI4m4IlTgvY7OQovmvePBFkslgXS39/PxpUdnOYmdQFuGvOlPHr2BLTFeV1oX8bIpwL65xTdq6CiBeghKEkSmkymIWK1WllRFIHjOEilUphMpuAQHptHzhOJJIUbGx9/NjU1nSVGo2nW73/5dWpqpiGTk4Evvb3WtZaW1guEkBO/ARQgDsZ2Sv7VAAAAAElFTkSuQmCC);
opacity:.75; display: block; position: absolute;
top: 0px; left: 33%; z-index: 1;
}
#hiBeauty.hiBeautted:before{
content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAC4jAAAuIwF4pT92AAACf0lEQVR42qWSW09aURCF9x9srJd6ARGqtf0nVUHkJreDtCrIRX/AjlFjQjUxISpXNdZ7DeC7rX1a0xm6TU6IjQ99+DIz+8xayVl7q06nox8eHoiBqb29fX5xRzxUu93WDJqNBj5NTeLjew8+TLgwOe6ExzEG9+gIXMNDcA4NwDHwFo16DbLfg1atVkszxMgBGey9fYbZ7e7beq3u7+81QxcXF9goFmmjWKD1Qh7r+TwVczkq5NaosJZFPpulfDaDXGaVcqsrtLayzH9RJ9GKh7q7u9MMzs7OsJxO4+vSEr6kUoyFtJXEUjKBVCKOVDwGKxZFMrrIRJBYjOD46AiiFQ91c3Ojb29viYGpvb19fnFHPNTV1ZW+vr7G4eEhpj3ubsgTHLBzaBDTbhfk22uIh+Js9OXlJTEwtbe3zy/uiIc6Pz/XDNVqNcmIOCOSjNKWRZwRcUYkGVnxGCX/ZkSNep1YA9EZtOKQNUOV42MYEzawOOQkG7BJPE5sAjahBAfNIVO1WiG5HNEZtGo2m/rk5AT/g3ioer2uGfpWKmHKPUGTrnHyOB1wj42Sa2SYnO8GyTHYj9H+PhrpeyOvXGIg1kB0Bq0qlYpmiEG1WiWDvbfP3fq8b6qgFV+7PuKHtb+/j0gwiHAwgFBgAaEFP4L+eQTmfQj4vFjweuH3zsE/N4v52Rn4Zj5jZ3sLohUPVS6XNUN7e3tImYAtvqVk95ZilOiGHAUHTXF+zbFImGLhEEXDIezsbJNoxUMdHBxohhiY2tvb53/taLW5uekrlUqPzE/mF/PE/H6FJ7MrmkfxUNlsdpcpZzKZU67fmR/ct7i2mY7A83OVs5bZkd1To939A6wgCBc2cNwFAAAAAElFTkSuQmCC);
}
#css_text_area_div {position: relative !important;   }
#hiBeauty {
padding: 0;
margin: 0;
width: auto;
cursor: pointer;
border: none
}
`;
function hiStat(x){
 vc.className=bt.className= x;
 bt.setAttribute('title',x? 'raw text': 'highlight');
 if(locStor) locStor.setItem('HiliteUsoCod', !!x);
}
function isBeauty(){
 sc=document.getElementById("stylish-code");
 if(!sc || !(sc.textContent)) return -1;
 if(sc.innerHTML.substr(0,hiId.length)===hiId){
  if(bt.className){
    sc.innerHTML='';
    sc.textContent=tc;
    hiStat('');
  }
  else hiStat('hiBeautted');
  return 1;
 }
 hiStat('');
 return 0;
}
 
function hiBeauty(e){
sc=document.getElementById("stylish-code");
 if(e){
 e.preventDefault(),e.stopPropagation();
 if(e.shiftKey || e.altKey) return;
 if(e.ctrlKey) {  // 2016-01-04
   GM_setClipboard(sc.textContent);
   window.status = 'CSS copied to clipboard';
   return;
 }}
 if(isBeauty()!=0) return;
 if(!( highlighted && tc && tc === sc.textContent )){
 tc =  sc.textContent;
 // console.log(tc);
 highlighted = cssbeautify(tc,  {
//     autosemicolon: true ,
//     openbrace: "newline",
       indent: "\u0020\u0020" // 14-02-26 o_0
       // indent: "    " // 14-02-26 o_0
//     indent: "\u00a0\u00a0"
     } );
 // console.log(highlighted);
 
 highlighted=highlighted.replace(/\n(\s*)@\s+/g,'\n$1@'); // 2014-03-12 dirty patch
 highlighted=highlighted.replace(/,\n\n+/g,',\n'); // 2014-03-12 4freecyber
 highlighted=highlighted.replace(/\n\n+/g,'\n\n'); // 2014-02-25
 highlighted=highlighted.replace(/&/g,'&amp;').replace(/</g,'&lt;')
 highlighted = hiId +
   Prism.highlight(highlighted, Prism.languages.css) /* */;
 }
 // console.log(highlighted);
 sc.innerHTML = highlighted ;
 hiStat('hiBeautted');
}
   /* * /
function insAfter(n,e){
  if(e.nextElementSibling)
   return e.parentNode.insertBefore(n,e.nextElementSibling);
  return e.parentNode.appendChild(n);
}  /* */
function insBefore(n,e){
   return e.parentNode.insertBefore(n,e);
}
function cE(t, aA, eL, ht) {
 var n = document.createElement(t);
 for (var at in aA)
    if(aA.hasOwnProperty(at)) n.setAttribute(at, aA[at]);
 if(eL) n.addEventListener(eL[0], eL[1], eL[2]?true:false);
 if(ht) n.innerHTML = ht;
 return n;
}
function sbclik(){
 
  if (document.querySelector('#stylish-code').outerHTML.indexOf('<textarea') !== -1 ) {
    document.querySelector('#stylish-code').outerHTML = document.querySelector('#stylish-code').outerHTML.replace('<textarea','<code');
    document.querySelector('#stylish-code').style.whiteSpace = 'pre-wrap';
    document.querySelector('#stylish-code').style.display = 'block';
    document.querySelector('#stylish-code').style.width = '700px';
  }
 
  if(!bt){
  vc = document.getElementById("stylish-code");
  if(!vc) return;
  var pz = cE('style');
  pz.textContent = prismCSS;
  document.head.appendChild(pz);
  bt=cE('div',{id: 'hiBeauty',title: 'Highlight'},['click', hiBeauty ],'');
  insBefore( bt, vc);
  }
  bt.className='';
  //if(HiliteOn) alert('HiOn'),HiliteOn=0;
}
 
 sb.addEventListener('mousedown', sbclik, false);
 
var locStor,HiliteUsoCod=false;
try { // localStorage throws 'security error' when cookies are disabled
  locStor = localStorage;
  HiliteUsoCod = locStor.getItem("HiliteUsoCod")==='true';
// see SQlite manager -> %FFpath%\webappstore.sqlite -> find -> key -> contains HiliteUso
} catch(e){ locStor = false; };
 
 
 
document.arrive('#stylish-code', function () {
  var toggle = document.querySelector('#hiBeauty');
   if (toggle.title === 'Highlight' && localStorage.getItem('HiliteUsoCod') == 'true'){
        toggle.click();
    }
});
 
 
 
})();
 
 
 
});