如何格式化JavaScript代码段以显示在网页上？

Question

我正在尝试格式化JavaScript代码段以使其在网页上显示，如下所示：-

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

我从这个Link那里得到了线索。

我已经包含了所有文件，并遵循了指令，但是它没有格式化它，而是显示了摘要。

以下是屏幕快照

我从json文件中获取了代码，这就是为什么它在一行中。

我删除了<script>，结果是一样的。

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

任何提示我该如何适当地安排？

Answer 1

如果要显示缩进，则需要将内容格式化为多行字符串。

document.getElementById('src').textContent = 
`
$(document).ready(function(){ 
   setTimeout(function(){ 
      console.log('deleting cookie'); 
      $.cookie('cookie',null,{domain: document.domain}); 
   },1000); });
`;

<pre class="prettyprint">
     <code class="javascript" id="src"></code>
</pre>

顺便说一句，请不要使用document.getElementById('src').innerHTML = xxx，因为字符串内的<script>将是有效的JavaScript代码并会被执行