Using Code Snippet in HTML5

Asked

Viewed 34 times

2

I’m putting together a page and in its contents there are code snippets HTML.

I tried to insert snippets of code this way but it didn’t 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 enter the full code snippet without the page interpreting the code HTML ? should I use some external library or there is some native resource from HTML to do this ?

html html5

1 answer

2


There is the xmp element, which is obsolete and the use of element pre.

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

And of course, also with the 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 extractor" for formatting, or creating your own mechanism.

Browser other questions tagged html html5

You are not signed in. Login or sign up in order to post.