How to view HTML code?

Asked

Viewed 6,328 times

5

How can I display my code HTML? I have a field where the user can change his nick by putting colors, and I want to display the code used as a hint to the user.

My code:

<pre>
  <code>
    <span style="color: red">Guizoio</span>
  </code>
</pre>

Only it doesn’t work it doesn’t display the HTML and yes Guizoio in red.

html css

2 answers

5


I was able to resolve, in order to display an HTML code on a website or blog, we cannot simply insert the code into the page normally (even within a text box), because the browser would try to interpret the code and it would not be displayed.

To display a code we must replace the keys:

< for &lt;

and key

> for &gt;

Source http://pc286.blogspot.com.br/2009/01/howto show cdigos-tags-html-ou.html

4

As an alternative the solution to escape/replace the characters can be used <textarea> to display the code. Just use the property readonly and remove the edges of the element:

textarea {
  border: none;
  resize: none
}
<textarea readonly rows='10' cols='40'>
  
<!doctype html>
<html lang='pt-br'>
  <head>
    <title>StackOverflow pt</title>
  </head>
  <body>
    <!-- ... -->
  </body>
</html>
</textarea>

Just as a curiosity: there was a tag <xmp> which allowed you to display text without interpreting it as HTML. In some browsers, the code below may still work. Remembering that it is an obsolete tag and its use is discouraged, the snippet is only as a matter of curiosity:

<xmp>
  <!doctype html>
  <html lang='pt-br'>
    <head>
      <title>StackOverflow pt</title>
    </head>
    <body>
      <!-- ... -->
    </body>
  </html>
</xmp>

  • 1

    Opa Renan, I managed to solve, I found even a plugin run_prettify.js and everything worked perfectly. But thank you for your reply.

Browser other questions tagged html css

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