Selezionare il codice inserito quando ci si clicca sopra

Da quando ho iniziato a scrivere sul blog mi sono sempre trovato in difficoltà con l’inserimento di codice, avevo cominciato mettendolo nelle textarea – cosa ignobile da fare col senno di poi – in modo da non rovinare il layout quando nel codice le parole erano troppo lunghe e non venivano wrappate correttamente. Successivamente mi son letto un po’ di manuali base di CSS e ho finalmente capito che il metodo migliore è inserirlo all’interno del tag PRE, assicurandosi di definire uno stile che tenga conto dell’overflow e non faccia sballare troppo la pagina.

Questo è lo stile che uso io:

pre {
	font-family: Courier,monospace;
	background: #EEE;
	font-size: 1.1em;
	line-height: 1.1em;
	border: dashed #666 1px;
	padding: 15px 20px 15px 20px;
	overflow: auto;
}

In particolare la riga:

overflow: auto;

serve per “nascondere” le righe troppo lunghe (è facile accorgersene perchè appariranno le scrollbar). Il fonte tutto Il resto è modificabile a piacimento. Io uso un font monospace come il Courier ma è possibile opti per un altro tipo di carattere in futuro.

Un’altra cosa che mi è sempre piaciuta è fare in modo che il codice inserito sia automaticamente selezionato quando ci si clicca sopra, cosa che devo aver visto su qualche blog di cui non ricordo l’indirizzo. Cercando un po’ con Google sono finalmente riuscito a trovare una risposta 🙂 . Per fare in modo che il codice venga automaticamente selezionato è necessario associare all’azione onClick dell’elemento un po’ di codice Javascript.

Ecco quindi cosa aggiungere al tag PRE per selezionare automaticamente il testo in esso contenuto:

<pre onClick="
if (window.getSelection) {
	var sel = window.getSelection();
	var range = document.createRange();
	range.selectNodeContents(this);
	sel.removeAllRanges();
	sel.addRange(range);
} 
else // per colpa di IE serve un if
	document.selection.empty();
	var range = document.body.createTextRange();
	range.moveToElementText(this);
	range.select();
}
">
codice
</pre>

(gli a capo sono messi solo per motivi di visualizzazione)

Come al solito per farlo funzionare anche con IE è necessario scrivere codice aggiuntivo 😛 Naturalmente è possibile associare il codice anche a tag diversi dal PRE, mentre per i tag INPUT e TEXTAREA si deve modificare un po’ il codice utilizzato.

Naturalmente io aggiungo quel codice automaticamente usando un programmino di text & replace (praticamente scrivo pre seguito da TAB), è comunque possibile aggiungere uno script alla pagina e richiamare il codice nel seguente modo:

<pre onClick="autoSelect(this);">
codice
</pre>

Per il codice della funzione autoSelect vi rimando all’articolo da cui ho scopiazzato il codice 🙂 .

Nel mio caso, non inserendo codice così spesso, preferisco far risparmiare al browser il caricamento di una funzione Javascript inutilizzata nella maggior parte delle pagine. Per lo stesso motivo, non credo di sovvracaricare ulteriormente il blog con uno script di syntax hightlighting

Technorati Tags: , ,

8 Responses to “Selezionare il codice inserito quando ci si clicca sopra”


  • Opera 9.26 Windows XP

    Due cose:

    – visto che ci ho sbattuto la testa personalmente ti posso dire che il trucchetto su WP funziona solo con CSS e simili ma non con codice HTML …. in pratica se trova codice formattabile WP esegue la formattazione normalmente …. per risolvere devi necessariamente installare un plugin ad hoc ma io non sono ancora riuscito a trovarne uno che mi soddisfi… l’unico (WP-CodeBox) sviluppato in modo decente purtroppo crea grossi problemi se accoppiato a K2

    – non ho indagato molto ma ti posso dire che attualmente la selezione automatica in questo post funziona davvero male o nulla (a seconda del box) … almeno con Opera 😉

    ciao

  • Mozilla Firefox 2.0.0.13 Windows XP

    Scusa, la prima non l’ho capita bene….
    Intendi che se metti codice dentro il PRE llui formatta il testo e non mostra il codice ?
    Se è quello, altrimenti scusa ma non ho capito, il trucchetto c’è fai una sostituzione:
    < -> &lt;
    > -> &gt;

    Per la seconda, in effetti non va neanche a me 😛 Prima avevo provato con IE e FF e funzionava a meraviglia 😛
    Ciao

  • Opera 9.26 Windows XP

    Per la prima si hai capito il problema… in effetti avevo usato anche io quel trucchetto inizialmente ma poi l’ho cestinato perchè, dal momento che lavoravo con l’editor disattivato, dovevo sostituirli tutti a mano O_o

    Ad ogni modo i plugin (ce ne sono parecchi) di cui parlavo hanno anche un’altra interessante funzione ovvero la colorazione del codice in base al linguaggio… cosa che ritengo molto utile

    WP CodeBox poi era l’unico che offriva anche altre funzioni come il collapse del box, il download del codice ed infine la possibilità di copiare il codice con un click … ma come detto con K2 da alcuni problemi

    Però a pensarci bene puoi per la selezione del codice sempre usare il js di questo plugin che non da problemi con Opera 😉

  • Mozilla Firefox 3.0b5 Windows XP

    Io di solito lo faccio scrivendo sull’editor di testo e poi faccio il “Replace All”., non mi piacciono gli editor WYSIWYG e preferisco scrivere il codice a mano con un’utility di text replacement che velocizza il tutto.

    Si, alla fine ho detto perchè il syntax hightlighting non mi interessa 😛
    Ciao

  • Opera 9.50 Windows XP

    Stavo facendo alcune prove con l’ultima build di Opera 9.5 …. e tra le altre adesso funziona anche il codice che hai usato qui 😀

    ciaociao

  • Mozilla Firefox 2.0.0.14 Windows XP

    Bene :-), in effetti mi sembrava strano non funzionasse visto che dall’articolo da cui lo avevo prelevato era scritto che era stato testato anche con Opera.
    Ciao

  • Mozilla Firefox 3.0.5 Windows Vista

    @Engelium,

    il plugin da te citato WP-CODEBOX (http://www.ericbess.com/ericblog/it/2008/03/03/wp-codebox/) non supporta WordPress 2.7, ma solo fino alla versione la 2.5.1 (http://wordpress.org/extend/plugins/wp-codebox/stats/).

    Sarebbe interessante trovare un plugin che supportasse la versione 2.7

  • Mozilla Firefox 2.0.0 Windows Vista

    @Sergejpinka

    Io al momento mi sono rivolto a SyntaxHighlighter Plus che si basa sull’ottimo script di Alex Gorbatchev

    Purtroppo non ha alcune funzioni di WP-Codebox ma in compenso ne ha molte altre e per molti aspetti è di gran lunga superiore… sarebbe interessante se integrassero le features mancanti ma non ci conto

    PS
    Oltre al plugin che uso io (che fa uso di tags BBCode) ne esistono molti altri sempre basati sullo stesso script ma che vengono attivati in diverso modo (tag code, pre, ecc…) 😉

    Ciao

Leave a Reply