Making XDA Code Readable Using JavaScript && CSS3

Posted at

before:

icompile.eladkarako.com_xda_code_before

Running this:

(function(css_code){
'use strict';

/* shortcuts */

NodeList.prototype.filter = Array.prototype.filter;
NodeList.prototype.map = Array.prototype.map;
NodeList.prototype.forEach = Array.prototype.forEach;


/* add new CSS */

document.querySelector('body').appendChild(
(function(element, text_content){
element.appendChild(text_content);
return element;
}(
document.createElement("style")
, document.createTextNode(css_code)
))
);

/* find code-sections, and replace them with new design */

document.querySelectorAll('div > div[class*="smallfont"]').filter(function(element){
return -1 !== element.innerText.toLowerCase().indexOf('code:');
}).map(function(element){
return element.nextElementSibling; /*will be <pre>*/
}).forEach(function(element){
element.parentNode.innerHTML = '<textarea code-content readonly>' + element.innerHTML + '</textarea>';
});


}(
[ ''
, '[code-content]{'
, ' word-break: break-all;'
, ' white-space: pre-wrap;'
, ''
, ' font: 12pt "Courier New", Consolas, monospace;'
, ' line-height: 16pt;'
, ' font-weight: normal;'
, ''
, ' color: rgba(0,0,0,.9);'
, ' background: rgba(240,240,240,1);'
, ' text-shadow: 0 0 .2px;'
, ' -webkit-text-stroke: 1px rgba(0,0,0,.2);'
, ''
, ' border-radius: 4px;'
, ' box-shadow: 0 0 5px rgba(0,0,0,.2);'
, ' border: 1px solid rgba(0,0,0,.2);'
, ''
, ' padding: 5px 10px 20px;'
, ' margin: 5px;'
, ' width: 100%;'
, ' height: 200px;'
, ' resize: none;'
, '}'
].join("\
")
));


after:

icompile.eladkarako.com_xda_code_after


apart from enlarging the container,
replacing <pre> with <textarea> (readonly)
allows easier use of [CTRL]+[A] (select all) and other [HOME] [END] copy&&paste combination.


and yes, there is a bookmarklet version (of course):

javascript:(function(css_code){NodeList.prototype.filter=Array.prototype.filter;NodeList.prototype.map=Array.prototype.map;NodeList.prototype.forEach=Array.prototype.forEach;document.querySelector("body").appendChild(function(element,text_content){element.appendChild(text_content);return element}(document.createElement("style"),document.createTextNode(css_code)));document.querySelectorAll('div > div[class*="smallfont"]').filter(function(element){return-1!==element.innerText.toLowerCase().indexOf("code:")}).map(function(element){return element.nextElementSibling}).forEach(function(element){element.parentNode.innerHTML="<textarea code-content readonly>"+element.innerHTML+"</textarea>"});return true})('[code-content]{word-break:break-all;white-space:pre-wrap;font:12pt "Courier New","Consolas",monospace;line-height:16pt;font-weight:normal;color:rgba(0,0,0,.9);background:rgba(240,240,240,1);text-shadow:0 0 .2px;-webkit-text-stroke:1px rgba(0,0,0,.2);border-radius:4px;box-shadow:0 0 5px rgba(0,0,0,.2);border:1px solid rgba(0,0,0,.2);padding:5px 10px 20px;margin:5px;width:100%;height:200px;resize:none;}');