javascript'i kod snippet'i olarak göster

Question

Yapmaya çalıştığım şey, sayfada bir javascript snippet'ini göstermesi ve çalıştırmaması, yalnızca kullanıcıların kopyalaması için bir kod snippet'i olarak gösterilmesidir.

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

Ama bu kod sadece yürütür ve JS parça göstermeye değildir: Sonra sayfasında bu kodu var, google'ın prettify yükleyin. Burada neyi özlüyorum?

Answer 1

Öyle gibi HTML öğeleri sizin < ve > karakterleri dönüştürmek gerekir:

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

Ben de mevcut <pre> etiketleri ek olarak <code> etiketleri kod sarma öneriyoruz.

Answer 2

<script> etiketleri nedeniyle çalışıyor. Sahip olduğunuz sorun HTML girmekte olmasıdır <script> etiketi

Answer 3

kullanımını <script> ve </script> ve bunu HTML olarak ele alınmaması istiyorum: Bunları kodlamak gerekir. Özellikle, açılış <script> öğesi.

HTML olarak ayrıştırılmayacak HTML girmek için HTML'ye özel karakterleri kodlamanız gerekir. Örneğin <, < olarak kodlanır, >, > olarak kodlanır ve &, & olarak kodlanır.

Yani, çıkışa onsuz şu HTML olarak ayrıştırılmıyordur: geleni

<script>...</script> 

Answer 4

için

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

(createTextNode ya) textContent özelliği edelim:

<script>...</script> 

... girmeniz gerekiyor Eğer dom eklemek için ne gerekiyorsa metin kodlama ağır kaldırma:

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