htmlgoogle-code-prettify

Google Code Prettify not working on HTML

I am using Google's code prettify to make code appear nicely on my website. It can be found here Google Code Prettify.

It does not work for HTML. I know you are suppose to replace < with &lt; and > with &gt;. I have done this but the browser still interprets it as HTML.

This is my HTML that I am trying to Prettify,

    <pre class="prettyprint">  
&lt;div class="container"&gt;
&lt;div class="col-md-5"&gt;
    &lt;div class="form-area"&gt;  
        &lt;form role="form"&gt;
        &lt;br style="clear:both"&gt;
                    &lt;h3 style="margin-bottom: 25px; text-align: center;"&gt;Contact Form&lt;/h3&gt;
            &lt;div class="form-group"&gt;
            &lt;input type="text" class="form-control" id="name" name="name" placeholder="Name" required&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;input type="text" class="form-control" id="email" name="email" placeholder="Email" required&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" required&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required&gt;
          &lt;/div&gt;
                    &lt;div class="form-group"&gt;
                    &lt;textarea class="form-control" type="textarea" id="message" placeholder="Message" maxlength="140" rows="7"&gt;&lt;/textarea&gt;
                        &lt;span class="help-block"&gt;&lt;p id="characterLeft" class="help-block "&gt;You have reached the limit&lt;/p&gt;&lt;/span&gt;                 
                    &lt;/div&gt;

        &lt;button type="button" id="submit" name="submit" class="btn btn-primary pull-right"&gt;Submit Form&lt;/button&gt;
        &lt;/form&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>

This is how it appears on the website,

enter image description here

And when I inspect element it looks like this,

<pre class="prettyprint prettyprinted"><span class="pln">  
</span><div class="container" &gt;="" <div="" <form="" role="form" <br="" style="clear:both" <h3="" &gt;contact="" form<="" h3&gt;="" <input="" type="text" id="name" name="name" placeholder="Name" required&gt;="" <="" div&gt;="" <textarea="" maxlength="140" rows="7" &gt;<="" textarea&gt;="" <span="" &gt;<p="" &gt;you="" have="" reached="" the="" limit<="" p&gt;<="" span&gt;="" <button="" &gt;submit="" button&gt;="" form&gt;="" pre=""><span class="pln">
                    </span><!-- /content --><span class="pln">

                  </span></div><!-- /.post-content --><span class="pln">

                </span></pre>

What is going on?

Solution

  • You can use the <xmp> tag in conjuction with prettify to display your code the way you want, without having to escape anything. Check it out:

    <pre class="prettyprint">  
  <xmp>
    <div class="container">
      <div class="col-md-5">
    <div class="form-area">  
      <form role="form">
        <br style="clear:both">
        <h3 style="margin-bottom: 25px; text-align: center;">Contact Form</h3>
        <div class="form-group">
          <input type="text" class="form-control" id="name" name="name" placeholder="Name" required>
        </div>
        <div class="form-group">
          <input type="text" class="form-control" id="email" name="email" placeholder="Email" required>
        </div>
        <div class="form-group">
          <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" required>
        </div>
        <div class="form-group">
          <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required>
        </div>
        <div class="form-group">
          <textarea class="form-control" type="textarea" id="message" placeholder="Message" maxlength="140" rows="7"></textarea>
          <span class="help-block"><p id="characterLeft" class="help-block ">You have reached the limit</p></span>                 
        </div>

        <button type="button" id="submit" name="submit" class="btn btn-primary pull-right">Submit Form</button>
      </form>
    </div>
      </div>
    </div>
  </xmp>
</pre>

    Make sure to include the script on the same page:

    <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

    And you're good to go!