Отображение javascript в виде фрагмента кода

то, что я пытаюсь сделать, это отобразить фрагмент 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. Я что-то упускаю?

8
css html javascript prettify

5 ответов

вам нужно преобразовать ваш < и > символы для 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> теги.

14

проблема заключается в том, что вы вводите HTML, и вы хотите, чтобы он не рассматривался как HTML. В частности, открытие <script> элемент.

чтобы ввести HTML, который не будет анализироваться как HTML, вам нужно кодировать символы, которые являются специальными для HTML. Например,< кодируется как &lt;, > кодируется как &gt; и & кодируется как &amp;.

Итак, чтобы вывести следующее без его разбора как HTML-код:

<script>...</script>

...вам нужно ввести:

&lt;script&gt;...&lt;/script&gt;
4

Он работает из-за <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>
2

использовать &lt;script&gt; и &lt;/script&gt; на <script> tag

0

пусть textContent свойства (или createTextNode) сделайте весь тяжелый подъем кодирования любого текста, который вам нужно вставить в dom:

var sampleCode="<script> $(document).ready(function(){ setTimeout(function(){ console.log('deleting cookie'); $.cookie('cookie',null,{domain: document.domain}); },1000); }); </script>";
var pre=document.createElement("pre");
pre.textContent=sampleCode;
pre.className="prettyprint";
document.body.appendChild(pre);
-1