How do I put html code in code blocks in html?

Question

Like I want a code block like below.

  <div>
     abcd
  </div>

When I enclose it under pre it doesn't do anything.

I googled it and reached this "If you want to use a code example that includes HTML, you must use HTML entities for your < and >. If you don't do this, it will be interpreted as actual HTML."

Not sure what that means though

score 5 · Answer 1 · answered Aug 21 '20 at 05:54

5

Please try this code:

<code>
  &lt;div&gt; <br />
  abcd
 <br /> &lt;/div&gt; 
  </code>

answered Aug 21 '20 at 05:54

pallavi sahni

95
3

score 2 · Answer 2 · answered Aug 21 '20 at 05:57

Some characters are reserved in HTML. If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags. Character entities are used to display reserved characters in HTML.

To display a less than sign (<) we must write: < or < To display a less than sign (<) we must write: < or > Here are some other references, https://dev.w3.org/html5/html-author/charref

So, if you want to display <html> inside your HTML output, you have to write <html&#gt; or &60;html> For example

<body>
This is a sample &#60;html&#62; 
</body>

Amaan warsi · Answer 3 · 2020-08-26T05:59:17.077

There are number of ways available to do that. In this post I'm going to give you some definition and example from each.

Using HTML Special Characters

<code>
   &lt;div class=&quot;div_class&quot;&gt; <br>
         &nbsp;&nbsp;&nbsp;abcd <br>
   &lt;/div&gt;
</code>

< stands for the less-than sign: <
> stands for the greater-than sign: >

Using ASCII Character Set

<code>
   &#60;div class&#61;&#34;div_class&#34;&#62; <br>
         &nbsp;&nbsp;&nbsp;abcd <br>
   &#60;&#47;div&#62;
</code>

/ stands for the slash sign: /
< stands for the less-than sign: <
> stands for the greater-than sign: >

See the reference here

Using HTML only

<code>
   <span><</span>div class="div_class"<span>></span> <br>
         &nbsp;&nbsp;&nbsp;abcd <br>
   <span></</span>div<span>></span>
</code>

Completely Using ASCII Character Set

<code>
   &#60;&#100;&#105;&#118; &#99;&#108;&#97;&#115;&#61;&#34;&#100;&#105;&#118;&#95;&#99;&#108;&#97;&#115;&#34;&#62; <br>
         &nbsp;&nbsp;&nbsp;&#97;&#98;&#99;&#100; <br>
   &#60;&#47;&#100;&#105;&#118;&#62;
</code>

/ stands for the slash sign: /
< stands for the less-than sign: <
> stands for the greater-than sign: >
a stands for the character A: a
b stands for the character B: b
c stands for the character C: c
d stands for the character D: d
i stands for the character I: i
v stands for the character V: v

See the reference here

score 0 · Accepted Answer · answered Aug 21 '20 at 06:06

<pre class="default prettyprint prettyprinted" style="">
 <code>
  <span class="pln"></span>
  <span class="tag">&lt;div&gt;</span>
  <span class="pln">abcd</span>
  <span class="tag">&lt;/div&gt;</span>
 </code>
</pre>

This is the HTML code what StackoverFlow make.

If you want to make the code autoly, the best solution is that use JavaScript to deal with your plain text data that get from the backend.

Such as with Markdown:

data = Markdown(data)
$(".Markdown-div").html(data)

How do I put html code in code blocks in html?

4 Answers4