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片段。我在这里缺少什么？

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>

除了现有的<code>代码之外，我还建议将代码包装在<pre>代码中。

Answer 2

您遇到的问题是您正在输入HTML，并且您希望它不被视为HTML。具体来说，是开头<script>元素。

为了输入不会被解析为HTML的HTML，您需要编码HTML特有的字符。例如，<编码为<，>编码为>，&编码为&。

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

<script>...</script>

...你需要输入：

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

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>

Answer 4

对<script>代码

使用</script>和<script>

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

将javascript显示为代码段

5 个答案: