any alternative of tag to renders html to as plain text</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2016-01-09T10:43:43.923" class="fromnow">Jan 09 '16 at 10:43</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2019-08-23T12:03:56.563" datetime="2019-08-23T12:03:56.563">Aug 23 '19 at 12:03</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 5,908 times"> <span class="fc-light mr2">Viewed</span> 5,908 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="34692479" data-ownerid="3518511" data-score="5"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="34692479"> <button class="js-vote-up-btn grid--cell s-btn s-btn__unset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="5">5</div> <button class="js-bookmark-btn s-btn s-btn__unset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value="0">0</div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I want to show HTML code as plain text.<br/> for example</p> <pre><code>&lt;div style="width:250px;"&gt; &lt;xmp&gt; &lt;a href="#"&gt; new element dummy text new element dummy text new element dummy text new element dummy text new element dummy text&lt;/a&gt; &lt;/xmp&gt; &lt;div&gt; </code></pre> <p>The problem is while using <code>&lt;xmp&gt;</code> tag its ignore the div width that contain text. How can I fix it out. Any other solution instead of <code>&lt;xmp&gt;</code> tag?</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/xmp" class="post-tag js-gps-track" title="show questions tagged 'xmp'" rel="tag">xmp</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Jan 16 '16 at 08:40">edited Jan 16 '16 at 08:40</time> <a href="../../users/1016716/mr-lister" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1016716.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Mr Lister" /> </a> <div class="s-user-card--info"> <a href="../../users/1016716/mr-lister" class="s-user-card--link">Mr Lister</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">45,515</li> <li class="s-award-bling s-award-bling__gold" title="15 gold badges">15</li> <li class="s-award-bling s-award-bling__silver" title="108 silver badges">108</li> <li class="s-award-bling s-award-bling__bronze" title="150 bronze badges">150</li> </ul> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jan 09 '16 at 10:43">asked Jan 09 '16 at 10:43</time> <a href="../../users/3518511/muhammad-tariq" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3518511.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Muhammad Tariq" /> </a> <div class="s-user-card--info"> <a href="../../users/3518511/muhammad-tariq" class="s-user-card--link">Muhammad Tariq</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">61</li> <li class="s-award-bling s-award-bling__silver" title="1 silver badges">1</li> <li class="s-award-bling s-award-bling__bronze" title="6 bronze badges">6</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-34692479" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="34692479" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-57131018" class="comment js-comment " data-comment-id="57131018" data-comment-owner-id="4997836" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment57131018_34692479"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Are you using only HTML or is it in combination with some serverside language. I.E. PHP?</span> –&nbsp;<a href="../../users/4997836/nijraj-gelani" title="1,446 reputation" class="comment-user ">Nijraj Gelani</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/34692479/any-alternative-of-xmp-tag-to-renders-html-to-as-plain-text#comment57131018_34692479"><span title="2016-01-09T10:48:12.083 License: CC BY-SA 3.0" class="relativetime-clean">Jan 09 '16 at 10:48</span></a></span> </div> </div> </li> <li id="comment-57131078" class="comment js-comment " data-comment-id="57131078" data-comment-owner-id="4997836" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment57131078_34692479"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">And also, `<xmp>` tag is deprecated since a long time. Use its replacement `<pre>` tag.</pre> – Nijraj Gelani Jan 09 '16 at 10:50

  • i try
     tag but it does not render html as plain text. i want to show source code as plain text.
    – Muhammad Tariq Jan 09 '16 at 10:52
  • yes i am using php to get source code from db and display it on screen as plain text – Muhammad Tariq Jan 09 '16 at 10:55
  • it is good form to accept the answer if it worked – Sheena Jun 27 '18 at 05:23
  • 2 Answers2

    2

    Simply using <xmp> or <pre> tag won't help you display HTML as plain text. The just help to format the text. In order to show HTML to your users you need to escape all special characters.

    For example, replace all < signs with &lt; and all > signs with &gt;.

    I've shown just two symbols, a quick google search will help you to find all the symbols and their replacements.

    And in case you're using PHP, it has built in function to do this. i.e. htmlentities($str). Search for whatever language you are using.

    Note that <xmp> Tag has been deprecated.

    Nijraj Gelani
    • 1,446
    • 18
    • 29
    1
    <div style="width:250px; background:yellow;">
    <pre>
    <script type="text/plain" style="display:block;">
    <a href="#"> new element  dummy 
    text new element  dummy text new 
    element 
    element 
    dummy text new element 
    dummy text new element 
    dummy text</a>
    </script>
    </pre>
    <div>
    
    Chayon Shaah
    • 109
    • 1
    • 4
    • try wrapping HTML content in For ex:
      
      
      Works in awesome way. You don't have to use obsolete example tag. <textarea> tag will wrap the content in text area. Try out !</textarea>
      – nisargdave1993 Jan 18 '20 at 11:50