How to show html source code in html page

Question

I want to display html code in html,I tried solution from SO itself, but that was not helpful or may be I'm missing something. Then, I tried following syntax, but not helpful (only getting Click Here to Apply).

<pre><code><span style='font-size:20px'>Click Here to Apply </span></code></pre>

Anyone help me to figure out, what's wrong in my approach ?

Answer 1

Tomer's answer is correct and that is the way that I would do it. But there is an alternative that uses JavaScript. You can remove the HTML of an element, and add it back as text using createTextNode(). Pass an element to this function:

function revealElementHTML(el) {
    var html = el.innerHTML;
    el.innerHTML = "";
    el.appendChild(document.createTextNode(html));
}

jsfiddle.net/rh7RW

Answer 2

You have to replace all '<' characters with < and all '>' with >

Note this won't provide code coloring though if that's what you seek.

Answer 3

There used to be an xmp tag to support this - this tag is now deprecated but is still supported by all major browsers.

You can use it if nothing else suits your needs.

<pre><xmp><span style='font-size:20px'>Click Here to Apply </span></xmp></pre>

Answer 4

if you require colorized snippests, jQuery.snippest offers a nice colorize tool.

http://www.steamdev.com/snippet/

Answer 5

you should use the ascii characters to show your code or you have to use javascript as on gilly3's answer.

you can convert your html code online.

If you use php, use htmlentities.

finally you can use following css to style it.

pre {
 white-space: pre-wrap; /* css-3 */
 white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
 white-space: -pre-wrap; /* Opera 4-6 */
 white-space: -o-pre-wrap; /* Opera 7 */
 word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Answer 6

i have try all of them, the pre/code is not really solution, but we have other 3 simple solution

1. textarea

<textarea name="tex" id="texa" cols="30" rows="10"class="one textarea">
        here is ok, mama? <a href="#">aoeueouoe</a> 

</textarea>

texa.value+='<br>\n\n'+i; 

2. xmp

<xmp>
    keyi1xiedaimama? <a href="#">aoeueouoe</a>      
</xmp>

3. createTextNode

info.appendChild(document.createTextNode(texa.value));