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 ?

possible duplicate of [Display HTML code in HTML](http://stackoverflow.com/questions/2820453/display-html-code-in-html) — user123444555621, Aug 04 '13 at 06:59
@Pumbaa80 but I think I followed all the answers and comment from that post. And, as OP of that post included same problem as I pointed here too that **replacing each `<` and `>` chars to `<` and `>` isn't seems to be efficient solution** Also, in my second approach shows, I even tried `
` too, but that also not helpful. — Ravi, Aug 04 '13 at 07:04
The answers clearly state that you have to escape the contents of `
`, but you don't need to escape the contents of `` — user123444555621, Aug 04 '13 at 07:11

score 3 · Answer 1 · edited Aug 04 '13 at 06:59

3

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

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

edited Aug 04 '13 at 06:59

Esoteric Screen Name

6,082
4
29
38

answered Aug 04 '13 at 06:52

Tomer W

3,395
2
29
44

i don't code coloring, what i want is, it should display code part instead of displaying only text part – Ravi Aug 04 '13 at 06:54
then try this. you cant use the '<' char even not in a tag. – Tomer W Aug 04 '13 at 06:55
@Tomer You can add html code to an answer by either putting it between backticks or by indenting it with 4 spaces. – Sumurai8 Aug 04 '13 at 06:55
but replacing each `<` and `>` chars to `<` and `>` isn't seems to be efficient solution. – Ravi Aug 04 '13 at 06:56
1

That is the standard html syntax for those characters when they are to be displayed. – Steve Barnes Aug 04 '13 at 07:00

score 3 · Accepted Answer · edited May 23 '17 at 12:15

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

score 2 · Answer 3 · answered Aug 04 '13 at 07:07

2

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>

answered Aug 04 '13 at 07:07

NoviceProgrammer

3,347
1
22
32

score 0 · Answer 4 · answered Aug 04 '13 at 07:13

0

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

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

answered Aug 04 '13 at 07:13

Tomer W

3,395
2
29
44

Janith Chinthana · Answer 5 · 2013-08-04T07:21:33.433

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+ */
}

score 0 · Answer 6 · answered Apr 13 '20 at 08:20

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

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;

xmp

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

createTextNode

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

How to show html source code in html page

6 Answers6