title: Google Code Prettify not working on HTML
body: <p>I am using Google's code prettify to make code appear nicely on my website. It can be found here <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html" rel="nofollow noreferrer">Google Code Prettify</a>. </p>
  
  <p>It does not work for HTML. I know you are suppose to replace <code>&lt;</code> with <code>&amp;lt;</code> and <code>&gt;</code> with <code>&amp;gt;</code>. I have done this but the browser still interprets it as HTML.</p>
  
  <p>This is my HTML that I am trying to Prettify,</p>
  
  <pre><code>    &lt;pre class="prettyprint"&gt;  
  &amp;lt;div class="container"&amp;gt;
  &amp;lt;div class="col-md-5"&amp;gt;
      &amp;lt;div class="form-area"&amp;gt;  
          &amp;lt;form role="form"&amp;gt;
          &amp;lt;br style="clear:both"&amp;gt;
                      &amp;lt;h3 style="margin-bottom: 25px; text-align: center;"&amp;gt;Contact Form&amp;lt;/h3&amp;gt;
              &amp;lt;div class="form-group"&amp;gt;
              &amp;lt;input type="text" class="form-control" id="name" name="name" placeholder="Name" required&amp;gt;
            &amp;lt;/div&amp;gt;
            &amp;lt;div class="form-group"&amp;gt;
              &amp;lt;input type="text" class="form-control" id="email" name="email" placeholder="Email" required&amp;gt;
            &amp;lt;/div&amp;gt;
            &amp;lt;div class="form-group"&amp;gt;
              &amp;lt;input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" required&amp;gt;
            &amp;lt;/div&amp;gt;
            &amp;lt;div class="form-group"&amp;gt;
              &amp;lt;input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required&amp;gt;
            &amp;lt;/div&amp;gt;
                      &amp;lt;div class="form-group"&amp;gt;
                      &amp;lt;textarea class="form-control" type="textarea" id="message" placeholder="Message" maxlength="140" rows="7"&amp;gt;&amp;lt;/textarea&amp;gt;
                          &amp;lt;span class="help-block"&amp;gt;&amp;lt;p id="characterLeft" class="help-block "&amp;gt;You have reached the limit&amp;lt;/p&amp;gt;&amp;lt;/span&amp;gt;                 
                      &amp;lt;/div&amp;gt;
  
          &amp;lt;button type="button" id="submit" name="submit" class="btn btn-primary pull-right"&amp;gt;Submit Form&amp;lt;/button&amp;gt;
          &amp;lt;/form&amp;gt;
      &amp;lt;/div&amp;gt;
  &amp;lt;/div&amp;gt;
  &amp;lt;/div&amp;gt;
  &lt;/pre&gt;
  </code></pre>
  
  <p>This is how it appears on the website,</p>
  
  <p><a href="https://i.stack.imgur.com/c2Okl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c2Okl.png" alt="enter image description here"></a></p>
  
  <p>And when I inspect element it looks like this,</p>
  
  <pre><code>&lt;pre class="prettyprint prettyprinted"&gt;&lt;span class="pln"&gt;  
  &lt;/span&gt;&lt;div class="container" &amp;gt;="" &lt;div="" &lt;form="" role="form" &lt;br="" style="clear:both" &lt;h3="" &amp;gt;contact="" form&lt;="" h3&amp;gt;="" &lt;input="" type="text" id="name" name="name" placeholder="Name" required&amp;gt;="" &lt;="" div&amp;gt;="" &lt;textarea="" maxlength="140" rows="7" &amp;gt;&lt;="" textarea&amp;gt;="" &lt;span="" &amp;gt;&lt;p="" &amp;gt;you="" have="" reached="" the="" limit&lt;="" p&amp;gt;&lt;="" span&amp;gt;="" &lt;button="" &amp;gt;submit="" button&amp;gt;="" form&amp;gt;="" pre=""&gt;&lt;span class="pln"&gt;
                      &lt;/span&gt;&lt;!-- /content --&gt;&lt;span class="pln"&gt;
  
                    &lt;/span&gt;&lt;/div&gt;&lt;!-- /.post-content --&gt;&lt;span class="pln"&gt;
  
                  &lt;/span&gt;&lt;/pre&gt;
  </code></pre>
  
  <p>What is going on?</p>