Écrire des blocs de code en HTML

1. Enveloppez la balise <code> et son contenu à l’intérieur de la balise <pre> pour écrire le bloc de code en HTML
2. Utilisez la balise <code> et la propriété CSS white-space pour écrire un bloc de code en HTML

Cet article présentera quelques méthodes d’écriture de blocs d’extraits de code en HTML.

Enveloppez la balise <code> et son contenu à l’intérieur de la balise <pre> pour écrire le bloc de code en HTML

La balise <code> définit un morceau de code informatique. Le contenu à l’intérieur est affiché dans la police monospace par défaut du navigateur.

La balise est utilisée pour représenter des blocs de code en HTML. La balise est une balise inline.

Cela signifie que si nous écrivons des extraits de code à l’intérieur de la balise <code>, le contenu à l’intérieur de la balise est affiché sur une ligne. Il ne conserve pas les sauts de ligne ni les espaces.

La balise <pre> définit le texte préformaté. Tout texte dans un élément <pre> est affiché dans une police à largeur fixe, et le texte conserve à la fois les espaces et les sauts de ligne.

Le texte ou le contenu à l’intérieur de la balise <pre> sera affiché tel qu’il est écrit exactement dans le code source HTML. La balise <pre> est un élément de niveau bloc.

Si nous enveloppons la balise <code> et son contenu dans la balise <pre>, le contenu à l’intérieur de la balise <code> se comportera comme un élément de niveau bloc. Le contenu aura la police monospace, et les sauts de ligne et les espaces des extraits de code seront également conservés.

Par exemple, écrivez du code JavaScript et placez le code dans la balise <code>. Ensuite, enveloppez l’élément <code> avec une balise <pre>.

Exemple de code :

<p>Code snippet for addition of two numbers in javascript</p>
<pre>
  <code>
    function add (a,b) {
    sum = a + b;
    return sum;
    }
  </code>
</pre>

L’exemple ci-dessus affichera le bloc de code JavaScript.

Utilisez la balise <code> et la propriété CSS white-space pour écrire un bloc de code en HTML

Dans cette méthode, nous chercherons un remplacement pour la balise <pre> en utilisant certains styles CSS. Auparavant, nous savions que l’élément <code> était un élément en ligne.

Nous avons utilisé la balise <pre> pour en faire un élément de niveau bloc. Mais, nous pouvons également faire de la balise <code> un élément de niveau bloc en définissant sa propriété display sur block.

Et nous pouvons préserver les sauts de ligne et les espaces de la balise code en définissant sa propriété white-space sur pre-wrap. En conséquence, il affichera des extraits de code tels qu’ils sont écrits dans le code source HTML.

Ainsi, nous pourrons créer des blocs de code en HTML.

Par exemple, créez une balise <code> et écrivez un extrait de code JavaScript à l’intérieur. Donnez à la balise <code> un nom de classe du type sum.

En CSS, sélectionnez la classe sum et définissez la propriété display sur block et la propriété white-space sur pre-wrap.

Exemple de code :

<code class="sum">
  function (a, b) {
  sum = a + b;
  return sum;
  }
</code>

.sum {
  display: block;
  white-space: pre-wrap;
}

Les exemples de code ci-dessus produiront un bloc de code JavaScript.