如何格式化 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>

我从这个 SO 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 代码并且会被执行