Making XDA Code Readable Using JavaScript && CSS3

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("\n")
));

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;}');