javascript - JavaScript をコード スニペットとして表示する

Question

私がやろうとしているのは、JavaScript のスニペットをページに表示することです。それを実行するのではなく、人々がコピーできるようにコード スニペットとして表示するだけです。Google の Prettify をロードすると、ページに次のコードが表示されます。

    <pre class="prettyprint">
    <script>
    $(document).ready(function(){
      setTimeout(function(){
        console.log('deleting cookie');
        $.cookie('cookie',null,{domain: document.domain});
     },1000);
    });
    </script>
   </pre>

ただし、このコードは実行されるだけで、JS スニペットは表示されません。ここで何が欠けていますか？

Answer 1

<次のように、文字と>文字を HTML エンティティに変換する必要があります。

<pre class="prettyprint">
  &lt;script&gt;
    $(document).ready(function(){
      setTimeout(function(){
        console.log('deleting cookie');
        $.cookie('cookie',null,{domain: document.domain});
      },1000);
    });
  &lt;/script&gt;
</pre>

<code>既存のタグに加えて、タグでコードをラップすることもお勧めし<pre>ます。

Answer 2

あなたが抱えている問題は、HTML を入力していて、HTML として扱われたくないということです。具体的にはオープニング<script>要素。

HTML として解析されない HTML を入力するには、HTML 固有の文字をエンコードする必要があります。たとえば、 は<としてエンコードされ<、>は としてエンコードされ>、は として&エンコードされ&ます。

したがって、HTMLとして解析せずに次を出力するには:

<script>...</script>

...入力する必要があります:

<script>...</script>

Answer 3

<script>タグのおかげで動いています。それらをエンコードする必要があります：

<pre class="prettyprint">
&lt;script&gt;
$(document).ready(function(){
  setTimeout(function(){
    console.log('deleting cookie');
    $.cookie('cookie',null,{domain: document.domain});
 },1000);
});
&lt;/script&gt;
</pre>

Answer 4

<script>およびタグ</script>に使用<script>