92

I'm using <code> tag inside of a <pre> tag to show code on my blogger blog. Unfortunately it doesn't work with HTML tags. Is there any way to show "<div>" inside of <pre> or <code> tag without actually interpreting it as HTML? This is what I do right now:

<pre>
 <code>
 .class {        
   color:red;
 }
 // I would like HTML code inside this
 </code>
</pre>

Which works ok for everything except HTML. Any idea how to achieve this? Thanks.

Loolooii
  • 8,588
  • 14
  • 66
  • 90
  • 1
    possible duplicate of [How to escape < and > inside 
     tags](http://stackoverflow.com/questions/42182/how-to-escape-and-inside-pre-tags)
     – Jukka K. Korpela Jul 08 '12 at 21:19
  • 1
    What you really want is a `<![CDATA[]]>` section; good luck waiting for the browser authors to catch up with 1988 in between adding kewl feetchers. – Toby Speight Aug 07 '15 at 15:55

11 Answers11

113

Unfortunately it doesn't work with HTML tags.

<code> means "This is code", <pre> means "White space in this markup is significant". Neither means "The content of this element should not be treated as HTML", so both work perfectly, even if they don't mean what you want them to mean.

Is there any way to show "<div>" inside of <pre> or <code> tag without actually interpreting it as HTML?

If you want to render a < character then use &lt;, with &gt; for > and &amp; for &.

You can't (in modern HTML) write markup and have it be interpreted as text.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 7
    Thanks. I'm using this tool now to escape HTML characters: http://www.htmlescape.net/htmlescape_tool.html – Loolooii Jul 08 '12 at 21:16
  • 2
    @XedinUnknown — And [here](http://www.w3.org/TR/html-markup/Overview.html) it says that you shouldn't reference that document. If you are right then **every browser on the planet** is not standards-compliant. You are not right. [The specification](http://www.w3.org/TR/html5/grouping-content.html#the-pre-element) describes the content model of a pre element and it can contain elements. Compare to [textarea](http://www.w3.org/TR/html5/forms.html#the-textarea-element) which can only contain text. – Quentin Sep 10 '15 at 12:55
60

It seems like a readonly textarea does pretty much what you want.

<textarea readonly> <!-- html code --> </textarea>
showdev
  • 28,454
  • 37
  • 55
  • 73
Jason Wilkins
  • 721
  • 5
  • 2
  • 11
    I would like some clarification why this has been voted down. The textarea tag allows literal HTML code. I just happen to be using it to display literal HTML when I came across this question and the answers seems rather complicated compared to just using a textarea. – Jason Wilkins Aug 09 '15 at 16:54
  • 2
    I didn't downvote, but in case anyone cares, it looks like character references are still parsed inside ``, e.g. `>` turns into `>`. This does mean it's not the "raw" contents anymore. – ShreevatsaR Dec 30 '20 at 23:51
  • This is a good answer, the only reason I can see someone using codes like > would be the default styles of textarea. Otherwise, this is my go-to option whenever I need to do this in my code. – Elliot Harrell Apr 22 '22 at 18:52
33

You can use the "xmp" element. The <xmp></xmp> has been in HTML since the beginning and is supported by all browsers. Even it should not be used, it is broadly supported.

Everything inside <xmp></xmp> is taken as it is (no markup lke tags or character references is recognized there) except, for apparent reason, the end tag of the element itself.

Otherwise "xmp" is rendered like "pre".

Roland
  • 676
  • 7
  • 7
  • 4
    This tag is obsolete. – Usman Ahmed Feb 11 '17 at 09:17
  • @UsmanAhmed Be that as it may - the `xmp` is used by nice stuff like embedding `markdown` – WestCoastProjects Jul 30 '17 at 04:12
  • 1
    `xmp` may be deprecated, but it is still HTML spec to support it to this day (which is why all major browsers do). I'd imagine it never gets fully deprecated, as it's the only tag of its kind and is more widely used today than it was when it was deemed deprecated. – Nate I Sep 04 '18 at 14:28
  • Still working in Chrome two years later, thanks for the answer that solved my problem. – Dave S Oct 26 '18 at 23:57
  • HTML Spec says: _Use pre and code instead, and escape "<" and "&" characters as "<" and "&" respectively._ https://html.spec.whatwg.org/#xmp – webpreneur Apr 20 '21 at 05:29
19

Try:

<xmp></xmp>

for exemple:

<pre>
     <xmp><!-- your html code --></xmp>
</pre>

bye

Alberto Cerqueira
  • 1,339
  • 14
  • 18
10

Just escape the HTML tags. For example -

Replace < with &lt;

Replace > with &gt;

Complete lookup here

Baum mit Augen
  • 49,044
  • 25
  • 144
  • 182
Vivek Kalyanarangan
  • 8,951
  • 1
  • 23
  • 42
5

This can be easily achieved with a little bit of javascript.

document.querySelectorAll("code").forEach(el => el.innerText = el.innerHTML);

Run snippet below to see it in action:

document.querySelectorAll("code").forEach(el => el.innerText = el.innerHTML);
pre {
  padding: 1rem;
  background-color: #eee;
  border-radius: 0.25rem;
}
<pre>
  <code>
   .class {        
     color:red;
   }
   
   // I would like HTML code inside this
   <h1>Hello this is a heading</h1>
  </code>
</pre>
Hirok Banik
  • 51
  • 1
  • 2
0

Try CodeMirror (https://codemirror.net/)

It's a lightweight library that styles code in HTML. Here's a screenshot of what I'm referring to:

enter image description here

Worked well for us!

Collarbone
  • 570
  • 7
  • 17
0

Not the best answer, but you could try to put a comment inside the tag like this:

<pre>
    <code<!-->>
        ...
    <<!-->/<!-->code>
</pre>
Elliot Harrell
  • 169
  • 7
0

<pre>
  <code><textarea>
    <div>Now you can write Tags inside pre tag!</div>
  </textarea><code>
 <pre>
Yuwan Kumar
  • 1
0

If you only need an opening tag, e.g <span>:

document.querySelectorAll('code').forEach(codeElement => {
    codeElement.innerText = `<${codeElement.innerText}>`;
});

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Vince
  • 109
  • 2
  • 9
-4

Yes, with an escape xml function. You'll need to have jQuery enabled for it to work though.

<pre>
  ${fn:escapeXml('
    <!-- all your code -->
  ')};
</pre>
PanicBus
  • 566
  • 1
  • 7
  • 17