How to use w3codecolor for html syntax highlighting?

Question

Based on example here I am trying to use w3codecolor for html syntax highlighting. I have added reference to https://www.w3schools.com/w3css/4/w3.css and https://www.w3schools.com/lib/w3codecolor.js and then call w3CodeColor(); function

However instead of showing html, its actually renders html output

Note that my html has custom element that i want to render as it is.

DEMO

Html

<div class="w3-panel w3-card w3-light-grey">
<h4>Example</h4>
<div class="w3-code htmlHigh notranslate">
    <file label="Please select a file." name="myimage" storage="{{bucket}}" validation="filetypes:.pdf|.txt|.xlsx maxfilesize:12345"></file>
    
    <dropdown label="Can you select a single state?" name="state">
        <option label="" value=""></option>
        <option label="Oklahoma" value="OK"></option>
        <option label="Texas" value="TX"></option>
        <option label="New York" value="NY"></option>
    </dropdown>
    
    <input id="firstname" name="firstname" />
</div>

UPDATE 1
As per the suggestion I have escaped html using jQuery and it seemed to be working. However it does not keep the tab indentation. Any suggestion on how to keep tab indent?

//escape

 $(".w3-code").each(function (i, v) {       
        var $code = $(v);
        $code.text($code.html());
        w3CodeColor();
 });

DEMO

Answer 1

It's a syntax highlighter.

It is just a syntax highlighter.

It won't dig into your HTML source code and convert your embeded XML into an HTML representation of your XML.

If you want a & character to be displayed then you need to escape it (&). Ditto for other special characters in HTML.

Once you have written the HTML to show the text you want, then the syntax highlighter can act on it.

Answer 2

As you can see in w3's online demo (found here) :

<div class="w3-panel w3-card w3-light-grey"> 
  <h4>HTML Example</h4>
  <div class="w3-code htmlHigh notranslate">
    &lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>
    &lt;title&gt;HTML Tutorial&lt;/title&gt;<br>
    &lt;body&gt;<br><br>
    &lt;h1&gt;This is a heading&lt;/h1&gt;<br>
    &lt;p&gt;This is a paragraph.&lt;/p&gt;<br><br>
    &lt;/body&gt;<br>
    &lt;/html&gt;
  </div>
</div>

You'll need to escape those special characters as @Quentin explained nicely.

Answer 3

adding pre tag helped

DEMO

 <div class="w3-panel w3-card w3-light-grey">
    <h4>Example</h4>
    <pre>
      <div class="w3-code htmlHigh notranslate">
          <file label="Please select a file." name="myimage" storage="{{bucket}}" validation="filetypes:.pdf|.txt|.xlsx maxfilesize:12345"></file>
          <dropdown label="Can you select a single state?" name="state">
              <option label="" value=""></option>
              <option label="Oklahoma" value="OK"></option>
              <option label="Texas" value="TX"></option>
              <option label="New York" value="NY"></option>
          </dropdown>

          <input id="firstname" name="firstname" />
      </div>
    </pre>
</div>

JS

 $(".w3-code").each(function (i, v) {       
        var $code = $(v);
        $code.text($code.html());
        w3CodeColor();
    });