Html code block for html snippet?

Question

This has to be the most frustrating thing ever lol.

I am using prettify.js to give the code syntax color, but with prettify.js or prism.js when I encode the html I have to write it like below with a period before .&lt , otherwise my syntax is messed up with # tags.

<pre class="prettyprint">.&lt;div class=&quot;modal modal--medium modal--middle&quot;&gt;
    &lt;div class=&quot;center-module&quot;&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;email&quot;&gt;
        &lt;button class=&quot;button button--primary&quot;&gt;send&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>

With a period the above shows

.<div class="modal modal--medium modal--middle">
    <div class="center-module">
        <input type="text" placeholder="email">
        <button class="button button--primary">send</button>
    </div>
</div>

Without a period before &lt

#<DIV class="modal modal--medium modal--middle"#>
    #<DIV class="center-module"#>
        #<INPUT type="text" placeholder="email"#>
        #<BUTTON class="button button--primary"#>send#</BUTTON>
    #</DIV#>
#</DIV#>

My question is how/why is the <div being wrapped with .tag <span class="tag">&lt;div</span> by prettify.js? Why do I need to add some character before the <div for it to work? Any ideas why it is doing this?

FYI any character before the <div will show the block just fine, but without a character when the &lr;div is wrapped by the <pre></pre> tags it shows a block with # tags.

Answer 1

You may want to take a look at the HTML5 code tag :

<code>
  <DIV class="modal modal--medium modal--middle">
    <DIV class="center-module">
      <INPUT type="text" placeholder="email">
      <BUTTON class="button button--primary">send</BUTTON>
    </DIV>
  </DIV>
</code>