Formats and highlights CSS code shown after [Show CSS] clicking. (works with the new userstyles.org layout).
// ==UserScript==
// @name userstyles.org css highlighter
// @namespace darkred
// @version 2018.2.27
// @description Formats and highlights CSS code shown after [Show CSS] clicking. (works with the new userstyles.org layout).
// @author trespassersW
// @contributor darkred
// @license MIT
//
// @released 2013-11-20
// @updated 2018-2-27
//
// 17.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 </& issue
//
// @include http://userstyles.org/styles/*
// @include https://userstyles.org/styles/*
// @include http://web.archive.org/web/20170222172435/https://userstyles.org/styles/118959/darksearch-for-google
// @grant GM.setClipboard
// @require https://greasyfork.org/scripts/21927-arrive-js/code/arrivejs.js
// @require https://greasemonkey.github.io/gm4-polyfill/gm4-polyfill.js
//
// @supportURL https://github.com/darkred/Userscripts/issues
// ==/UserScript==
/* globals Prism, cssbeautify */
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, '&').replace(/</g, '<');
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 = '715px';
document.querySelector('#stylish-code').style.overflowX = 'hidden';
document.querySelector('#stylish-code').style.border = '1px';
document.querySelector('#stylish-code').style.borderStyle = 'solid';
document.querySelector('#stylish-code').style.borderColor = 'black';
document.querySelector('#stylish-code').style.marginLeft = '-12px';
}
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();
}
});
document.querySelector('.css_button').addEventListener('click', function() {
if (document.querySelector('.css_button').firstChild.className === 'css_open') {
document.querySelector('#stylish-code').style.display = 'none';
document.querySelector('#hiBeauty').style.display = 'none';
} else {
document.querySelector('#stylish-code').style.display = 'block';
document.querySelector('#hiBeauty').style.display = 'initial';
}
});
})();
});