JavaScript: far visualizzare il sorgente del codice

Far visualizzare agli utenti il sorgente del codice è relativamente semplice in JavaScript.

Partendo dalla seguente marcatura:

<div class="code">
	<div class="code-toolbar">
		<a href="#" class="source">Visualizza sorgente</a>
	</div>
  <pre></pre>
</div>

Possiamo scrivere il seguente codice JavaScript:

var viewSource = function(elements) {
    var blocks = document.querySelectorAll(elements);
    if(blocks.length > 0) {
        for(var i = 0; i < blocks.length;, i++) {
            var block = blocks[i];
            var pre = block.querySelector('pre');
            var link = block.querySelector('.source');
            link.addEventListener('click', function(e) {
                e.preventDefault();
                var newWindow = window.open(location.href, 'code','location=1,status=1,scrollbars=1, width=400,height=400');
          			var newDocument = newWindow.document;
          			newDocument.write('<pre>' + pre.innerHTML + '</pre>');
          			newDocument.close();
            });
        }
    }
};

Esempio d'uso:

document.addEventListener('DOMContentLoaded', function() {
    viewSource('.code');
});