Essendo un blog che si occupa di fare guide in italiano e che cerca di farle nel modo più accurato e semplice possibile come conseguenza naturale facciamo anche molta ricerca e in questo periodo ci siamo imbattuti in molti forum dove spesso viene chiesto proprio come è possibile in Html e CSS scrivere codice come testo, nella maggior parte delle occasioni però le risposte più valide arrivano da siti internet in inglese, che per quanto sia una lingua essenziale da conoscere nell’ambito informatico, non è così scontato che tutti lo sappiano, e in ogni caso non è da tutti conoscere l’inglese tecnico; ecco perché oggi vogliamo esporvi 2 metodi che reputiamo efficaci al fine di mostrare parte di codice senza che venga interpretato dal browser, principalmente soprattutto grazie al codice HTML, ma vi daremo anche 2 consigli su come “abbellirlo” e visualizzarlo al meglio grazie al CSS.
Indice
- Scrivere i caratteri speciali in codice HTML
- Scrivere il codice all’interno del tag <textarea>
- Usare il tag <blockquotes>
- Creare una classe apposita per il codice
Scrivere i caratteri speciali in codice HTML
Questo è un metodo semplice, ma che a volte crea confusione, perché consiste nel sostituire all’interno del codice che volete che si veda i caratteri speciali, (ad es. le virgolette o le varie parentesi) con i codici HTML corrispondenti. Non è difficile applicarlo, bisogna solo fare molta attenzione a ciò che scriviamo. Vi facciamo subito un esempio.
Poniamo il caso che abbiate la necessità di mostrare come è stata scritta una parte di testo in codice HTML come questa:
I computer sono incredibilmente veloci, accurati e stupidi. Gli uomini sono incredibilmente lenti, inaccurati e intelligenti. L’insieme dei due costituisce una forza incalcolabile. – Albert Einstein
Per mostrare il testo sotto forma di codice HTML, senza che venga interpretato dal browser dovrete scrivere così:
<p style="text-align: center; font-size: 18px"> I <strong>computer</strong> sono incredibilmente veloci, accurati e stupidi. Gli <strong>uomini</strong> sono incredibilmente lenti, inaccurati e intelligenti. L’insieme dei due costituisce una forza incalcolabile. – <cite>Albert Einstein</cite></p>
Il risultato visivo che otterrete sarà proprio questo:
<p style="text-align: center; font-size: 18px"> I <strong>computer</strong> sono incredibilmente veloci, accurati e stupidi. Gli <strong>uomini</strong> sono incredibilmente lenti, inaccurati e intelligenti. L’insieme dei due costituisce una forza incalcolabile. – <cite>Albert Einstein</cite></p>
Come potrete notare leggendo attentamente abbiamo sostituito i caratteri speciali con i corrispondenti in HTML.
| Carattere speciale | Codice HTML |
|---|---|
| “ | " |
| < | < |
| > | > |
| – | – |
Niente di proibitivo dunque, ci vorrà solo un minimo di conoscenza di HTML e di concentrazione.
Scrivere il codice all’interno del tag <textarea>
Secondo metodo che abbiamo trovato pratico e che non richiede grosse conoscenze di codice è proprio l’utilizzo del tag “textarea” associato a due o più attributi. Qui sotto vi riportiamo il codice che dovrete utilizzare.
<textarea readonly="readonly" cols = "50" rows = "10">I <strong>computer</strong> sono incredibilmente veloci, accurati e stupidi. Gli <strong>uomini</strong> sono incredibilmente lenti, inaccurati e intelligenti. L’insieme dei due costituisce una forza incalcolabile. – <cite>Albert Einstein</cite> </textarea>
Il risultato sarà questo:
In questo caso noi abbiamo usato 4 attributi associati al tag “textarea”:
- name = definiamo il nome della’aerea di testo.
- readonly = con valore readonly gli abbiamo detto che deve essere di sola lettura, se lo omettiamo diventerà un aria di testo con possibilità di scrittura.
- cols = con valore numerico di 50 gli stiamo specificando la larghezza visibile dell’area di testo.
- rows = con valore numerico di 10 gli specifichiamo il numero visibile di linee dell’area di testo.
Questa tecnica non è la più bella a vedersi, ma è quella più veloce da eseguire e che ci da meno da pensare, veloce e pratica. Volendo, inoltre, aggiungendo la regola “textarea {resize: none;}” al CSS toglieremo il ridimensionamento in basso a destra dell’area di testo, evitando così che gli utenti ne modifichino la grandezza
Creare una classe apposita per il codice
Grazie ai fogli di stile abbiamo la possibilità di gestire come visualizzare il codice al meglio delle nostre necessità. Ad esempio noi abbiamo deciso di usare un colore di sfondo, un bordo con uno spessore e un colore precisi e un carattere diverso dal resto del sito.
Questo il codice CSS da aggiungere:
.esempiocodice {
height: auto;
width: 400px;
font-family: sans-serif;
background : #d1ffd4;
border : 2px solid #64fb6f;
padding : 20px;
}
Anche questo non è così complicato da fare e vi aiuta mettere in risalto la parte di testo o di codice che vi interessa. Nel nostro caso abbiamo usato un selettore di classe (.esempiocodice) e nel blocco delle dichiarazioni (cioè tutto ciò che sta dentro le parentesi graffe) abbiamo messo come proprietà l’altezza (height, con valore auto che si regolerà in base al contenuto), la larghezza (width, con valore numerico in px), il carattere con cui impostare la parte di codice (font-family), il colore dello sfondo (background, con un valore numerico che abbiamo indicato con un numero esadecimale), il bordo (border, a cui abbiamo detto di essere spesso di due px, pieno e di un colore con valore numerico indicato sempre con un numero esadecimale ) e lo spazio di distanza all’interno dei bordi dell’elemento (padding, con valore numerico); dopo di che abbiamo dato una classe ad un paragrafo ( <p class = "esempiocodice">Testo/Codice<p>) ottenendo così il risultato voluto.
Speriamo davvero di esservi stati utili e di aver chiarito come è possibile visualizzare del codice come testo senza che il browser lo interpreti, grazie al codice HTML e CSS.
