2.1 Balise <pre>
Les balises <code> et <pre> sont utilisées en HTML pour représenter des extraits de code et du texte préformaté.
Elles permettent d'améliorer la lisibilité et de conserver la mise en forme du texte original, ce qui est particulièrement utile pour afficher
des exemples de code et d'autres matériaux techniques.
La balise <pre> (abréviation de "preformatted text") est utilisée pour afficher du texte en HTML tel qu'il est écrit en conservant tous les espaces, sauts de ligne et tabulations. C'est particulièrement utile pour représenter de grands
extraits de code ou d'autre texte préformaté.
Syntaxe :
<pre>
texte
</pre>
Exemple :
<pre>
function sayHello() {
console.log("Hello, world!");
}
</pre>
Dans cet exemple, le texte à l'intérieur de la balise <pre> sera affiché en conservant tous les espaces et sauts de ligne,
tel qu'il est écrit dans le code source.
Caractéristiques de la balise <pre> :
- La balise
<pre>conserve tous les espaces et sauts de ligne dans le texte - Elle affiche le texte dans une police à largeur fixe
- Elle est souvent utilisée avec la balise
<code>pour mettre en évidence le code
2.2 Balise <code>
La balise <code> est utilisée pour indiquer des extraits de code ou d'autres données lisibles par machine dans le texte. Elle
est généralement appliquée pour mettre en évidence des lignes de code, des variables, des fonctions et d'autres éléments de programmation.
<code>code</code>
Exemple :
<p>Pour afficher un message dans la console, utilisez la fonction <code>console.log()</code>.</p>
Dans cet exemple, le texte "console.log()" sera mis en évidence comme du code.
Caractéristiques de la balise <code> :
- La balise
<code>affiche le texte dans une police à largeur fixe (généralement Courier ou Consolas) - Elle ne conserve pas la mise en forme, comme les sauts de ligne ou les indentations
- La balise
<code>est souvent utilisée à l'intérieur d'autres balises, telles que<p>,<li>ou<pre>
2.3 Utilisation de <pre> et <code>
Pour la mise en évidence et la mise en forme de grands blocs de code, les balises <pre> et <code> sont souvent utilisées ensemble.
Cela permet de conserver la mise en forme et de mettre en évidence le texte comme du code.
Exemple :
<pre><code>
function helloWorld() {
console.log('Hello, world!');
}
</code></pre>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
En conséquence, le navigateur affichera le texte avec la mise en forme conservée et la mise en évidence du code.
2.4 Mise en évidence de la syntaxe
Pour la mise en évidence de la syntaxe, vous pouvez utiliser des bibliothèques tierces, telles que Prism.js ou Highlight.js, qui reconnaissent et mettent automatiquement en évidence la syntaxe du code sur la page web.
Exemple d'utilisation de 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>
En résultat, le bloc de code sera automatiquement mis en évidence conformément à la syntaxe JavaScript.
Les balises <code> et <pre> en HTML sont des outils puissants pour afficher et formater
du code et d'autres textes tout en conservant la mise en forme originale. Utilisez-les avec plaisir.
GO TO FULL VERSION