Google Code Prettify 不适用于 HTML

Question

我正在使用 Google 的代码美化来使代码在我的网站上显示得很好。可以在这里找到Google Code Prettify。

它不适用于 HTML。我知道您应该将< 替换为<，将> 替换为>。我已经这样做了，但浏览器仍将其解释为 HTML。

这是我想要美化的 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>

你很高兴！

Answer 2

我有一个关于 google-code-prettify 和 HTML5 的类似问题。答案中的链接已过时。正确的 html 标记（具有正确的来源）现在是：

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

在这里找到google-prettify的git目录：

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