On utilise les fichiers du site https://prismjs.com/.
Pour cela, on télécharge une version des fichiers prism.js et prism.css que l'on place dans son projet.
Dans l'entête du fichier html, on rajoute les lignes suivantes.
<script src="../libraries/prism.js"></script> <!-- visualisation du code -->
<link href="../CSS/prism.css" rel="stylesheet" />
<link href="../CSS/perso.css" rel="stylesheet" />
On y retrouve les liens vers les deux fichiers ainsi que certainement un lien vers un fichier CSS personnel.
On utilisera les balise pre et code et on spécifiera le langage à utiliser pour la coloration syntaxique.
Voici un exemple.
<pre>
<code class="language-js">
function setup() {
var canvas = createCanvas(100, 100);
// Move the canvas so it’s inside our < div id="sketch-holder" >.
canvas.parent('sketch-holder');
background(255, 0, 200);
}
</code>
</pre>
Voici le résultat :
function setup() {
var canvas = createCanvas(100, 100);
// Move the canvas so it’s inside our < div id="sketch-holder" >.
canvas.parent('sketch-holder');
background(255, 0, 200);
}
Pour éviter que le code html soit exécuter, remplacer les "<" par "& l t ;" (sans espaces).