Wyświetl javascript jako fragment kodu

Question

Próbuję wyświetlić fragment kodu javascript na stronie i nie uruchamiać go, wyświetlać tylko jako fragment kodu dla osób do skopiowania. Załadować Google upiększać, a następnie na stronie mam ten kod:

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

Ale to tylko kod wykonuje i nie wyświetla fragment JS. Czego tu mi brakuje?

Answer 1

trzeba konwertować < i > postacie do podmiotów HTML tak:

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

Chciałbym również polecić zawijania kod w <code> tagów oprócz istniejących <pre> tagów.

Answer 2

Działa z powodu tagów <script>. Należy je kodować:

<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

korzystanie <script> i </script> dla <script> tagu

Answer 4

Problemem jest to, że masz wpisywania kodu HTML i chcesz to nie może być traktowane jako HTML. W szczególności element otwierający <script>.

Aby wprowadzić kod HTML, który nie będzie analizowany jako HTML, należy zakodować znaki specjalne dla kodu HTML. Na przykład kod < jest kodowany jako <, > jest kodowany jako >, a & jest kodowany jako &.

więc do wyjścia następuje bez niego jest analizowany jako HTML:

<script>...</script> 

... trzeba wpisać:

<script>...</script> 

Answer 5

Niech właściwość textContent (lub createTextNode) zrobić wszystko ciężkie podnoszenie kodowania tekstu, który chcesz wstawić do 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);