Показать javascript как код snippet

Question

То, что я пытаюсь сделать, это отобразить фрагмент javascript на странице и не запускать его, просто отображаться в виде фрагмента кода для копирования людей. Я загружаю приукрасить Google, затем на странице у меня есть этот код:

<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

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

использование <script> и </script> для <script> тега

Answer 4

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

Чтобы ввести HTML-код, который не будет обрабатываться как HTML, необходимо кодировать символы, которые являются особыми для HTML. Например, < кодируется как <, > кодируется как >, а & кодируется как &.

Таким образом, чтобы вывести следующее без него быть разобрано как HTML:

<script>...</script> 

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

<script>...</script> 

Answer 5

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

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