Molte librerie che forniscono la colorazione del codice hanno una funzione che permette di visualizzare il sorgente non formattato. Possiamo implementare una funzionalità simile anche senza usare tali librerie utilizzando solo jQuery e le popup JavaScript. Vediamo come.
Una popup non è altro che un nuovo oggetto window. Tale oggetto, come noto, ha al suo interno un oggetto document. In tal senso è possibile utilizzare il metodo write() per inserire il nostro contenuto nella popup.
Partiamo da questa struttura HTML:
<div class="code">
<div class="code-toolbar">
<a href="#" class="source">Visualizza sorgente</a>
</div>
<pre>
$(document).ready(function() {
$('#test').click(function() {
alert('Test');
});
});
</pre>
</div>
Dobbiamo semplicemente associare un'azione al link con classe source, prendendo il contenuto dell'elemento pre e inserendolo nella nuova finestra:
$(function() {
$('div.code', document.body).each(function() {
var $div = $(this);
var $link = $('a.source', $div);
var html = $('pre', $div).html();
$link.click(function(event) {
var newWindow = window.open(location.href, 'code','location=1,status=1,scrollbars=1, width=400,height=400');
var newDocument = newWindow.document;
newDocument.write('<pre>' + html + '</pre>');
newDocument.close();
event.preventDefault();
});
});
});
Il codice di cui sopra funziona come ci si aspetterebbe in Chrome e Firefox. Opera, al contrario, visualizza il contenuto in una nuova pagina. Non ho avuto modo di testarlo in Internet Explorer, quindi se non dovesse funzionare in questo browser non esitate a comunicarmelo e, se potete, a fornire una soluzione.
Potete visionare l'esempio finale in questa pagina.