5549 sujets

Sémantique web et HTML

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.
upload/1673697777-62242-capturedancran2023-01-1413002.png

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)
Bonjour,
Ce code devrait fonctionner :
<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>&lt;script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'rgb(200, 0, 0)';
    ctx.fillRect(10, 10, 55, 50);
    &lt;/script></pre>

Bon weekend
Meilleure solution