Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

blogger

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.

like image 856
Loolooii Avatar asked Jul 08 '12 20:07

Loolooii


People also ask

How do you style a pre tag?

The <pre> tag defines preformatted text. Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.

How do I use pre HTML tags?

<pre>: The Preformatted Text element. The <pre> HTML element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or monospaced, font. Whitespace inside this element is displayed as written.

How do you show tags in HTML?

You can show HTML tags as plain text in HTML on a website or webpage by replacing < with &lt; or &60; and > with &gt; or &62; on each HTML tag that you want to be visible. Ordinarily, HTML tags are not visible to the reader on the browser. They are there but you cannot see them.

How do I display code snippets in HTML?

HTML provides many methods for text-formatting but <code> tag is displayed with fixed letter size, font, and spacing. Some points about <code> tag: It is mainly used to display the code snippet into the web browser. This tag styles its element to match the computer's default text format.


1 Answers

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.

like image 190
Quentin Avatar answered Sep 29 '22 08:09

Quentin