Problème avec la balise <pre>

Bonjour à vous tous,

J'ai un souci avec la balise <pre>. Je souhaite écrire du code HTML dans son intégralité sous cette forme :

<pre>&lt;!DOCTYPE html></pre>
                        <pre>&lt;html></pre>
                        <pre>   &lt;head></pre>
                        <pre>   &lt;/head></pre>
                        <pre>&lt;body></pre>
                        <pre><span class="mise_en_avant">   &lt;canvas id="myCanvas" <span class="retour_a_la_ligne2">width="300" height="150">&lt;/canvas></span></span></pre>
                        <pre>&lt;/body></pre>
                        <pre>&lt;html></pre>
                        <pre><canvas id="myCanvas" width="300" height="150"></canvas></pre>
                        <pre><script></pre>
                        <pre>    var canvas = document.getElementById('myCanvas');</pre>
                        <pre>    var ctx = canvas.getContext('2d');</pre>
                        <pre>    ctx.fillStyle = 'rgb(200, 0, 0)';</pre>
                        <pre>    ctx.fillRect(10, 10, 55, 50);</pre>
                        <pre></script></pre>

Mais comme vous pouvez le voir, le code Javascript ne peux pas être inclus dans les balises <pre> et </pre>, il y a des lignes soulignées en rouge qui apparaissent dans Visual Studio Code et surtout, ce code ne s'affiche pas une fois qu'on exécute la page dans le navigateur.


L'un de vous saurait comment faire pour afficher le code Javascript comme le code HTML ?

Merci pour votre aide
Modifié par ObiJuanKenobi (14 Jan 2023 - 13:03)

Merci phiper, ça marche comme tu le proposes.