1

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?

Gary Holiday
  • 3,297
  • 3
  • 31
  • 72
  • The most minimal setup with your code works in chrome: https://jsfiddle.net/nt3j32sf/1/ The error must be somewhere else in your code that might interact with the tag... – Maksim Solovjov Aug 02 '15 at 21:50
  • How do I detect if something else is affecting the tag? – Gary Holiday Aug 02 '15 at 21:52
  • I don't know any easy ways, I'd temporarily comment out all javascript if it is possible. However, another guess is that you are including the source code to be prettyfied somehow wrong. How is it included, how do you fetch it? – Maksim Solovjov Aug 02 '15 at 21:59
  • I just created a new `.php` file on my server and made a basic html page with only the Google Prettify javascript and the same problem happened. I believe it has something to do with my web host. – Gary Holiday Aug 02 '15 at 22:03

2 Answers2

8

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!

Anthony Hilyard
  • 1,220
  • 12
  • 27
  • This method worked. I believe my web hosting services converted the `<` to `<` when I saved the document. Using this method javascript converted the `<` to `<` on page load. Thanks! – Gary Holiday Aug 03 '15 at 19:43
0

I had a similar question about google-code-prettify and HTML5. The link in the answer is outdated. The correct html markup (with right source) is now:

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

Find the git directory of google-prettify here:

https://github.com/google/code-prettify

JackEdgewood
  • 11