Visualizza javascript come snippet di codice

Question

Quello che sto cercando di fare è visualizzare uno snippet di javascript sulla pagina, e non farlo girare, basta mostrarlo come un frammento di codice per la gente da copiare. Io caricare di google Prettify, quindi nella pagina ho questo codice:

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

Ma questo codice viene eseguito solo e non visualizza il frammento di JS. Cosa mi manca qui?

Answer 1

avete bisogno di convertire i tuoi < e > caratteri in entità HTML in questo modo:

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

consiglierei anche avvolgendo il codice in <code> tag in aggiunta alle esistenti <pre> tag.

Answer 2

È in esecuzione a causa dei tag <script>. Si dovrebbe codificare:

<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

uso <script> e </script> per <script> tag

Answer 4

Il problema che ho è che si sta entrando in HTML e lo si vuole di non essere trattato come HTML. Nello specifico, l'elemento <script> di apertura.

Per immettere HTML che non verrà analizzato come HTML, è necessario codificare caratteri che sono speciali per HTML. Ad esempio, < è codificato come <, > è codificato come > e & è codificato come &.

Così, per emettere il seguente senza che sia analizzato come HTML:

<script>...</script> 

... è necessario inserire:

<script>...</script> 

Answer 5

lasciare la proprietà textContent (o createTextNode) fare tutto il sollevamento di codifica di qualsiasi testo che è necessario inserire in 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);