JavaScript als Code-Snippet anzeigen

Question

Was ich versuche ist, ein Schnipsel von Javascript auf der Seite anzuzeigen, und nicht ausgeführt, nur als Code-Snippet für Leute zu kopieren. Ich lade Google Prettify, dann in der Seite, die ich diesen Code habe:

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

Aber dieser Code ausgeführt gerade und nicht den JS-Schnipsel nicht angezeigt. Was fehlt mir hier?

Answer 1

Sie benötigen < und > Zeichen in HTML-Entitäten zu konvertieren, wie so:

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

ich auch den Code in <code> Tags zusätzlich zu den bestehenden <pre> Tags Einwickeln empfehlen würde.

Answer 2

Es läuft wegen der <script> Tags.

<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

Verwendung <script> und </script> für <script> Tag

Answer 4

Das Problem, das Sie haben, ist, dass Sie HTML eingeben und Sie wollen es nicht als HTML behandelt werden: Sie sollten sie kodieren. Genauer gesagt, das Öffnen <script> Element.

Um HTML einzugeben, das nicht als HTML geparst wird, müssen Sie Zeichen kodieren, die speziell für HTML sind. Zum Beispiel ist < kodiert als <, > ist codiert als > und & ist codiert als &.

Also, folgende, ohne es zur Ausgabe als HTML analysiert werden:

<script>...</script> 

... Sie eingeben müssen:

<script>...</script> 

Answer 5

die textContent Eigenschaft sei (oder createTextNode) alles tun, die schweres Heben von Codierung, was auch immer Text Sie in Dom einfügen müssen:

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