Visualisation de code dans la page HTML

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.

Autour du bloc à insérer

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);
}
       
   

Une astuce pour le code HTML

Pour éviter que le code html soit exécuter, remplacer les "<" par "& l t ;" (sans espaces).