CODEWITHSUNDEEP
htmlblogger
Loolooii
Loolooii

Reputation: 9190

How to show <div> tag literally in <code>/<pre> tag?

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.

Upvotes: 94

Views: 74128

Answers (11)

Vince
Vince

Reputation: 136

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

Upvotes: 0

Elliot Harrell
Elliot Harrell

Reputation: 169

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

<pre>
    <code<!-->>
        ...
    <<!-->/<!-->code>
</pre>

Upvotes: 0

yuwankmr
yuwankmr

Reputation: 41

<pre>
  <code><textarea>
    <div>Now you can write Tags inside pre tag!</div>
  </textarea><code>
 <pre>

Upvotes: 0

Vivek Kalyanarangan
Vivek Kalyanarangan

Reputation: 9081

Just escape the HTML tags. For example -

Replace < with &lt;

Replace > with &gt;

Complete lookup here

Upvotes: 10

Hirok Banik
Hirok Banik

Reputation: 51

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>

Upvotes: 5

Alberto Cerqueira
Alberto Cerqueira

Reputation: 1419

Try:

<xmp></xmp>

for exemple:

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

bye

Upvotes: 20

Roland
Roland

Reputation: 736

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".

Upvotes: 35

Jason Wilkins
Jason Wilkins

Reputation: 741

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

<textarea readonly> <!-- html code --> </textarea>

Upvotes: 62

Collarbone
Collarbone

Reputation: 610

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!

Upvotes: 0

PanicBus
PanicBus

Reputation: 576

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>

Upvotes: -4

Quentin
Quentin

Reputation: 944320

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.

Upvotes: 116

Related Questions