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

What exactly is the question? : ) I'm thinking it's something like *"When I encode the html I have to write it with a period before `.&lt`, otherwise my syntax is messed up with `#` tags. How do I write it without a period before `&lt`, and keep it free of `#` tags?"* — Jonny Henly, Apr 20 '15 at 23:51
I'm assuming the question is why do you need the period. This [fiddle](http://jsfiddle.net/yvkeqgcL/) seems to show that you don't need it. Is there more to your code that can you can give us? — drs9222, Apr 21 '15 at 00:00
Yeah sorry, I should have stated that. Well my mistake, but it's quite irritating. Let me try to explain my environment, I have the prettify.js script, and I have encoded the html and set it within the pre tags. Simple as that, but I get those hashes, so yes my question is why do I have to have a `character` before my begging encoded html snippet? — Michael Joseph Aubry, Apr 21 '15 at 00:20
@drs9222 I copied the fiddle directly into sublime, without any spaces and still got the same result, what happens is this `<div` prettify.js is wrapping the `<div` in a `.tag`. — Michael Joseph Aubry, Apr 21 '15 at 00:23

score 0 · Answer 1 · answered Nov 05 '16 at 23:34

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>

Html code block for html snippet?

1 Answers1