Comment Améliorer vos Extraits de Code ?

Publié le

Imaginons que vous souhaitez expliquer une partie de code, sur votre site.

Pour facilement afficher ce code, vous pouvez en faire une capture d'écran et ajouter l'image à votre article. Le problème ?. Si toutefois les internautes veulent copier-coller votre code, alors ils ne pourront pas. A moins d'installer une extension OCR sur leur navigateur.

C'est pourquoi, je vous suggère d'écrire le code en texte brut. Cela en replaçant les caractères HTML réservés par leur entités associées. Par exemple, < devient &lt; et > devient &gt;.

Vous pouvez écrire ce code entre les balises <code></code>. Si votre code s'étend sur plusieurs lignes, ajoutez la balise <pre>. La balise <pre></pre> permet de conserver le formatage du texte.

Exemple :

Code source :


        &lt;!-- index.html  --&gt;
       
              &lt;code&gt;
                    &lt;p&gt;un paragraphe HTML&lt;/p&gt;	
              &lt;code&gt;

Code affiché :

<!-- index.html -->
<code> <p>un paragraphe HTML</p> <code>

Désormais, le code s'affiche comme du texte. On peut donc le sélectionner et le copier. Par contre, on vient de perdre la coloration syntaxique de notre éditeur de code. Le code perd donc énormément en lisibilité.

hightlight.js

C'est là qu'intervient highlight.js. hightlight.js est une bibliothèque qui permet d'ajouter la coloration syntaxique à votre balise <code>. La bibliothèque va analyser votre code pour reconnaître les mots-clés du langage et appliquer une coloration en conséquence.

Comment l'utiliser ?

Il vous suffit d'importer le script Javascript et une feuille de style CSS. Vous pouvez changer la feuille de style CSS pour modifier le thème de la coloration syntaxique.

Pour trouver les liens des autres thèmes :

  1. allez sur la page de cdnjs ;
  2. dans Asset Type : filtrez sur Styling ;
  3. chaque URL, chaque fichier CSS correspond à un thème ;
  4. remplacez l'URL de l'attribut href par l'URL d'un autre thème.

Exemple :


    <!-- index.html  -->
        
  <head>
        <link rel="stylesheet" href="[https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/monokai-sublime.min.css](view-source:https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/monokai-sublime.min.css)">

        <script src="[https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js](view-source:https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js)"></script>
  </head>

Une dernière chose, ajoutez une class="HTML" à l'élément code. Adaptez le nom de la classe en fonction du langage (HTML, Javascript, CSS, PHP,...). Enfin, placez l'élément <code> dans un <pre>.