Google Code Prettify不支持HTML

Question

我正在使用谷歌的代码美化来使代码在我的网站上很好地显示.它可以在这里找到Google Code Prettify.

它不适用于HTML.我知道你是假设,以取代<与<和>带>.我已经这样做了,但浏览器仍然将其解释为HTML.

这是我试图Prettify的HTML,

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

这是它出现在网站上的方式,

当我检查元素时,它看起来像这样,

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

到底是怎么回事？

Answer 1

您可以将<xmp>标签与美化相结合,以您想要的方式显示您的代码,而不必逃避任何事情.看看这个:

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

确保在同一页面上包含脚本:

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

你很高兴去!