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]
Wordle: Mostrare codice sorgente nel nostro articolo in WordPress

Termini collegati: , Scrivi il tuo commento all'articolo

2 Commenti

  1. Pubblicato 20 febbraio 2009 alle 12:09 | Link Permanente

    Secondo me i plugin come wp-syntax sono molto utili, perchè, oltre a formattare correttamente il codice, ti colorano la sintassi come preferisci, aumentando la leggibilità del codice.

  2. Pubblicato 20 febbraio 2009 alle 14:15 | Link Permanente

    Concordo pienamente. Magari però ci sono persone che non hanno bisogno di inserire codice in maniera ricorrente e per loro aggiungere un plugin che non viene sfruttato appieno non è la soluzione migliore. Io sono un seguace del detto “ciò che non c’è, non si rompe”, ancora valido anche nell’ era del web 2.0.

Scrivi un Commento

Il tuo indirizzo Email non verra' mai pubblicato e/o condiviso. I Campi obbligatori sono contrassegnati con *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="">