2.1 Tag <pre>
I tag <code> e <pre> sono usati in HTML per la rappresentazione di frammenti di codice e testo preformattato. Permettono di migliorare la leggibilità e mantenere la formattazione del testo originale, il che è particolarmente utile per mostrare esempi di codice e altri materiali tecnici.
Il tag <pre> (abbreviazione di "preformatted text") è usato per mostrare il testo in HTML esattamente come è scritto, mantenendo tutti gli spazi, i ritorni a capo e le tabulazioni. Questo è particolarmente utile per rappresentare grandi frammenti di codice o altri testi preformattati.
Sintassi:
<pre>
testo
</pre>
Esempio:
<pre>
function sayHello() {
console.log("Hello, world!");
}
</pre>
In questo esempio il testo all'interno del tag <pre> sarà visualizzato mantenendo tutti gli spazi e i ritorni a capo, come è scritto nel codice sorgente.
Caratteristiche del tag <pre>:
- Il tag
<pre>conserva tutti gli spazi e i ritorni a capo nel testo - Mostra il testo in un font monospaziato
- Viene spesso utilizzato insieme al tag
<code>per evidenziare il codice
2.2 Tag <code>
Il tag <code> è usato per indicare frammenti di codice o altri dati leggibili dalla macchina all'interno del testo. È generalmente utilizzato per evidenziare stringhe di codice, variabili, funzioni e altri elementi di programmazione.
<code>codice</code>
Esempio:
<p>Per stampare un messaggio nella console, usa la funzione <code>console.log()</code>.</p>
In questo esempio il testo "console.log()" sarà evidenziato come codice.
Caratteristiche del tag <code>:
- Il tag
<code>visualizza il testo in un font monospaziato (di solito Courier o Consolas) - Non conserva la formattazione come i ritorni a capo o gli spazi
- Il tag
<code>è spesso utilizzato all'interno di altri tag come<p>,<li>o<pre>
2.3 Uso di <pre> e <code>
Per evidenziare e formattare grandi blocchi di codice si utilizzano spesso insieme i tag <pre> e <code>. Questo permette di mantenere la formattazione e evidenziare il testo come codice.
Esempio:
<pre><code>
function helloWorld() {
console.log('Hello, world!');
}
</code></pre>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
Il browser visualizzerà il testo conservando la formattazione e evidenziando il codice.
2.4 Evidenziazione della sintassi
Per l'evidenziazione della sintassi si possono utilizzare librerie di terze parti come Prism.js o Highlight.js, che rilevano e evidenziano automaticamente la sintassi del codice sulla pagina web.
Esempio di utilizzo di Highlight.js:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre><code>
function helloWorld() {
console.log('Hello, world!');
}
</code></pre>
<body>
</html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
<body>
</html>
Il blocco di codice sarà automaticamente evidenziato in base alla sintassi di JavaScript.
I tag <code> e <pre> in HTML sono strumenti potenti per visualizzare e formattare codice e altri testi mantenendo la formattazione originale. Usali con piacere!
GO TO FULL VERSION