Bonjour à toutes et tous,

Lorsque je veux intégrer du code dans mon fichier HTML, j'utilise :

<pre>
   <code>
   </code>
</pre>

Au niveau du texte pur, c'est parfait, ça me permet d'avoir du code non modifiable, contrairement à <textarea>.

Mon problème se situe plus du côté de la numérotation des lignes ainsi que la coloration de mon code à l'intérieur de ces balises. En effet, je suis obligée de numéroter les lignes manuellement, idem pour la coloration. Ça me donne un truc du style :

<pre>
   <code>
      1   // Affichage de la demande de confirmation d'inscription
      2   <span style="color: #2bdf5c">document</span><span style="color: #00245a">.getElementById</span>
            <span style="color: orange">("confirmation")</span><span style="color: black">.addEventListener(</span>
            <span style="color: orange">"change",</span> <span style="color: #00245a">function</span>
            <span style="color: black">(e) {</span>
      3       <span style="color: #00245a">console.log(</span><span style="color: orange">"Demande de confirmation : "</span>
                <span style="color: black">+ e.target.checked);</span>
      4   <span style="color: black">});</span>
   </code>
</pre>

Donc pas très cool / agréable vous vous en doutez…

J'aurais aimé quelque chose du même style que les morceaux de code dans les cours, mais même en examinant le code je ne vois pas comment ils font...

Merci d'avance pour le coup de main

Salut,

je me sers de Prism de Léa Verou (I love You Léa !) :

https://prismjs.com/download.html#themes=prism-solarizedlight&languages=markup+css+clike+javascript

Léger et facile d'utilisation.

Nickel pour la coloration, merci beaucoup pour le tuyau.

En ce qui concerne la numérotation, tu utilises quoi?

Tu as le plugin qui va avec Prism :

https://prismjs.com/plugins/line-numbers/

D'ailleurs il y a plein de plugin sympa comme le bouton download

https://prismjs.com/#plugins

-
Edité par Frogweb 9 septembre 2019 à 18:22:22

Merci beaucoup, ça marche nickel!

Je ferme le sujet.

Bonjour
Dans html, il existe les listes ordonnées, essaies:
<pre>
<ol style="color: rgb(R, G, B)">
<li><code>... ligne ...</code></li>
... autres lignes ...
</ol>
</pre>
ou R, G, B sont les contributions aux trois couleurs rouge, vert, bleu (0 à 255).
Tu peux remplacer le rgb() par le nom de la couleur dans les standards.

PierrotLeFou : L'inconvénient de ta technique est que ça ne sera qu'en une seule couleur, je voulais plutôt quelque chose qui ressemble aux coloration de code de VScode par exemple. L'astuce de Frogweb me va parfaitement, juste besoin d'intégrer les fichiers prism. En plus tu as plusieurs thèmes possible, plusieurs langages pris en charge (je crois même tous), donc pourquoi s'embêter ?

t

Je suppose que cela est plus vite que ma méthode. Mais, après tout, on parle bien de html et css, non?
Tu peux insérer des balises comme <em> ou <span> auxquelles tu donnes des attributs de couleurs.

C'est déjà ce que je faisais, seulement ça me prenait un temps fou pour obtenir un bel effet final, agréable à lire sur navigateur. De plus ça rendait mon code brouillon… Donc vraiment pas terrible…