Mostrare codice sorgente nel nostro articolo in WordPress

A volte (io spesso) dobbiamo mostrare delle linee di codice nei nostri articoli: possiamo scrivere un tutorial, dei trucchi per WordPress, analizzare delle funzioni e cosi’ via.

I problemi a cui possiamo andare incontro sono molteplici.

A volte una linea di codice e’ troppo lunga per venire mostrata nel nostro articolo: non possiamo arbitrariamente inserire un line-break poichè chi andra’ a copiare il codice poi non otterra’ il risultato sperato.

Abbiamo a dsposizione due tag HTML che ci vengono in aiuto:

1. PRE
2. CODE

Il tag <pre> definisce un testo preformattato. Il testo contenuto all’interno viene mostrato con un carattere monospace (a meno di cambiamenti, ho visto una volta del codice scritto in Comic Sans…) e preserva sia gli spazi bianchi che gli a capo.

Un esempio (tratto da W3C Schools):

<pre>Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks
</pre>

Il tag <code> definisce invece testo riguardante il vero e proprio codice.

Un esempio:

<code>Computer code text</code>

Per personalizzare il risultato grafico di questi due tag dobbiamo agire sul nostro file CSS.

Un esempio è questo qui sotto ed è riferito al sito che state guardando:

pre, code {background:#e0dfdf;overflow:auto}
code {padding:0 3px}
pre {padding-bottom:2px}
pre code {padding-left:6px}

Il codice CSS praticamente mostra un colore di spondo per i due tag e imposta i padding per avere una visione piu’ chiara. Inoltre allarga il box di riferimento quando ce ne è bisogno.

Un altro problema puo’ sorgere quando il browser cerca di interpretare il codice.

L’unico modo per poter evitare che cio’ accada è usare le cosiddette HTML Entities. In questo modo il codice verrà scritto in maniera adeguata ed il browser non cercherà di interpretare il nostro testo come se fosse vero codice.

Possiamo usare due metodi:

1. scrivere direttamente il codice

   pre, code {background:#e0dfdf;overflow:auto}
   code {padding:0 3px}pre {padding-bottom:2px}
   pre code {padding-left:6px}

   e poi aggiungere <pre> e <code> passando alla maschera HTML per ottenere

   pre, code {background:#e0dfdf;overflow:auto}
   code {padding:0 3px}
   pre {padding-bottom:2px}
   pre code {padding-left:6px}

   oppure

2. utilizzare il comodo strumento online HTMLizer che genera direttamente le entities di cui abbiamo bisogno.

Mi pare inutile l’utilizzo di plugin appositi, ma la mia è solo un’ opinione. Se avete suggerimenti a riguardo, lasciate un commento.
[wordcloud]