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: css, html, javascript
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
Powered byciao
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:
< -> <
> -> >
Per la seconda, in effetti non va neanche a me
Prima avevo provato con IE e FF e funzionava a meraviglia 
Ciao
Powered byPer 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
Powered byIo 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
Powered byStavo facendo alcune prove con l’ultima build di Opera 9.5 …. e tra le altre adesso funziona anche il codice che hai usato qui
Powered byciaociao
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.
Powered byCiao