展示JavaScript代码片段

Question

我的目的是在网页上显示一段JavaScript代码片段，并且不让它运行，只供用户复制。我加载了谷歌的Prettify库，然后在页面上放置了以下代码：

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

但是这段代码只能执行而无法显示JS片段。我错过了什么？

- Webster Gordon

---

尝试查看此问题的源HTML，这将向您展示一种方法。 - Adrian Wragg

Answer 1

你需要将<和>字符转换为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>

除了现有的<pre>标签，我还建议将代码用<code>标签包装起来。

- Travis

Answer 2

您的问题在于输入了HTML代码，但您希望它不被视为HTML。具体来说，是开头的<script>元素。

为了输入不会被解析为HTML的HTML代码，您需要对HTML中特殊的字符进行编码。例如，将<编码为<，将>编码为>，将&编码为&。

因此，要输出以下内容而不被解析为HTML：

<script>...</script>

你需要输入以下内容：

<script>...</script>

- Jim

Answer 3

因为有 <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>

- basher

Answer 4

在 <script> 标签中使用 <script> 和 </script>

- Moazzam Khan

Answer 5

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

- jongo45