1

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 ?

6
  • Is your code being generated dynamically? Commented Aug 4, 2013 at 6:53
  • no, i'm writing that code in html Commented Aug 4, 2013 at 6:54
  • possible duplicate of Display HTML code in HTML Commented Aug 4, 2013 at 6:59
  • Please read ALL answers and comments in the linked question Commented Aug 4, 2013 at 7:00
  • @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 &lt; and &gt; isn't seems to be efficient solution Also, in my second approach shows, I even tried <pre><code> too, but that also not helpful. Commented Aug 4, 2013 at 7:04

6 Answers 6

3

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

Sign up to request clarification or add additional context in comments.

Comments

3

You have to replace all '<' characters with &lt; and all '>' with &gt;

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

5 Comments

i don't code coloring, what i want is, it should display code part instead of displaying only text part
then try this. you cant use the '<' char even not in a <code> tag.
@Tomer You can add html code to an answer by either putting it between backticks or by indenting it with 4 spaces.
but replacing each < and > chars to &lt; and &gt; isn't seems to be efficient solution.
That is the standard html syntax for those characters when they are to be displayed.
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>

Comments

0

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

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

Comments

0

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

Comments

0

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; 

  1. xmp
<xmp>
    keyi1xiedaimama? <a href="#">aoeueouoe</a>      
</xmp>
  1. createTextNode
info.appendChild(document.createTextNode(texa.value));

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.