Using Code Snippet in HTML5

2

I'm putting together a page and its content contains HTML snippets of code.

I tried inserting snippets of code this way but it did not work:

/*
<!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>
*/

How can I insert the complete code snippet without the page interpreting the HTML code? Should I use any external libraries or is there some native HTML feature to do this?

    
asked by anonymous 21.11.2016 / 14:45

1 answer

2

The xmp element is deprecated and you are advised to use pre element .

Below is an example of using 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>

Of course, also with 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>

Using the pre element, you can use some "html escaper" to format, or create the its own mechanism.

    
21.11.2016 / 15:04