Tutoriel de highlight.js

Sans highlight.js

On écrit une ligne de code dans un élément HTML code. Par exemple, ce code :

&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&quot;&gt;

donne ce résultat : <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Souvenez-vous qu'il faut échapper les caractères pour les afficher correctement. Pour cela, vous pouvez utiliser cet outil en ligne.

Quand on écrit plusieurs lignes de code, on imbrique l'élément HTML code dans un élément pre.

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Titre&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;p&gt;Un paragraphe.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<!DOCTYPE html>
<html>
<head>
  <title>Titre</title>
</head>
<body>
  <p>Un paragraphe.</p>
</body>
</html>

Avec highlight.js

Le framework highlight.js permet en plus de colorier le code pour le rendre plus beau et compréhensible.

Pour l'utiliser, il suffit d'importer le code CSS et JS (comme Bootstrap) et activer la coloration. Le langage utilisé dans l'élément code est détecté automatiquement.

Voici un exemple minimal, lui-même colorié avec highlight.js.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/default.min.css"><!-- CSS de highlight.js -->
</head>
<body>
  <pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Titre&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;Un paragraphe.&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script><!-- JS de highlight.js-->
  <script>hljs.initHighlightingOnLoad();</script><!-- activer la coloration du code -->
</body>
</html>

On peut ajouter une classe à l'élément code pour choisir manuellement le langage. Par exemple, on a les classes html, css, javascript, etc.