以代碼片段的形式顯示javascript

我想要做的是在頁面上顯示一段JavaScript代碼，並且不會運行它，只需顯示爲供人們複製的代碼片段即可。我打開谷歌的美化，然後在頁面上我有這樣的代碼：以代碼片段的形式顯示javascript

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

但這代碼只是執行，並不會顯示JS代碼片段。我在這裏錯過了什麼？

來源

2013-07-19 Webster Gordon

嘗試查看源代碼這個問題的HTML，這會告訴你一種方式。 –

哈哈很好的電話.. –

您需要將<和>字符轉換爲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>標籤。

來源

2013-07-19 18:42:22 Travis

它正在運行，因爲<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>

來源

2013-07-19 18:42:23 basher

使用<script>和</script>爲<script>標籤

來源

2013-07-19 18:42:33

你的問題是，你正在進入HTML，你希望它不是作爲HTML處理。具體來說，開頭<script>元素。

爲了輸入不會被解析爲HTML的HTML，您需要對HTML特殊的字符進行編碼。例如，<編碼爲<,>編碼爲>，並且&編碼爲&。

所以，輸出沒有它的下面被解析爲HTML：

<script>...</script>

...你需要輸入：

&lt;script&gt;...&lt;/script&gt;

來源

2013-07-19 18:42:34 Jim

-1

讓textContent屬性（或createTextNode）做的所有編碼無論你需要插入到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);

來源

2013-07-19 18:52:40 jongo45

以代碼片段的形式顯示javascript

回答

相關問題