How can I display my code HTML ? I have a field where the user can change his nick by placing colors, and I want to display the code used as a hint for the user.
My code:
<pre>
<code>
<span style="color: red">Guizoio</span>
</code>
</pre>
It does not work, it does not display HTML , but rather Guizoio in red.
I was able to resolve, to display an HTML code on a website or blog, we can not simply insert the code on the page normally (even inside a text box) because the browser would try to interpret the code and it would not be displayed. / p>
To display a code we must replace the keys:
< by <
and key
> by >
Source link
As an alternative to escape / replace the characters you can use <textarea> to display the code. Just use the readonly property and remove the element's borders:
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 curious: there was the <xmp> tag that allowed 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 just for the sake of even curiosity:
<xmp>
<!doctype html>
<html lang='pt-br'>
<head>
<title>StackOverflow pt</title>
</head>
<body>
<!-- ... -->
</body>
</html>
</xmp>