1

Google の code prettify を使用して、自分の Web サイトでコードを適切に表示しています。Google Code Prettifyで見つけることができます。

HTML では機能しません。<私はあなたがと&lt;に置き換えることになっていることを知ってい>ます&gt;。これを実行しましたが、ブラウザはまだ 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>

何が起こっている？

4

2 に答える 2

6

この<xmp>タグを prettify と組み合わせて使用​​すると、何もエスケープすることなく、コードを思いどおりに表示できます。見てみな：

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

そして、あなたは行ってもいいです！

于 2015-08-03T17:30:55.423 に答える