2

Estou montando uma página e no conteúdo dela existem trechos de códigos HTML.

Tentei inserir trechos de códigos dessa forma mas não deu certo:

/*
<!DOCTYPE html>
<html>
<body>
 <p>Arrays :</p>
<pre>
 <code> 
 <!DOCTYPE html>
    <html>
    <body>

    <p id="demo"></p>
    <script>
    var carros = ["Saab", "Volvo", "BMW"];
    document.getElementById("demo").innerHTML = carros;
    </script>

    </body>
    </html>
 </code>
</pre>

</body>
</html>
*/

Como posso inserir o trecho de código completo sem que a página faça interpretação do código HTML ? devo usar alguma biblioteca externa ou existe algum recurso nativo do HTML para fazer isso ?

1 Resposta 1

2

Existe o elemento xmp, que está obsoleto e aconselha-se a utilização do elemento pre.

Abaixo está um exemplo da utilização de XMP:

xmp {
  background-color: #eff0f1;
}
<xmp>
  <!DOCTYPE html>
  <html>

  <body>

    <p id="demo"></p>
    <script>
      var carros = ["Saab", "Volvo", "BMW"];
      document.getElementById("demo").innerHTML = carros;
    </script>

  </body>

  </html>
</xmp>

E claro, também com o PRE:

pre {
  background-color: #e1e1e1;
}
<pre><code>
&lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;body&gt;

    &lt;p id=&quot;demo&quot;&gt;&lt;/p&gt;
    &lt;script&gt;
    var carros = [&quot;Saab&quot;, &quot;Volvo&quot;, &quot;BMW&quot;];
    document.getElementById(&quot;demo&quot;).innerHTML = carros;
    &lt;/script&gt;

    &lt;/body&gt;
&lt;/html&gt;
</code>
</pre>

Utilizando o elemento pre, você pode utilizar algum "escapador de html" para a formatação, ou criar o seu próprio mecanismo.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .