使用 Google Prettify 显示 HTML答案

【问题标题】：Using Google Prettify to display HTML使用 Google Prettify 显示 HTML
【发布时间】：2012-05-04 02:29:45
【问题描述】：

为了让 Google Prettify 正确显示 HTML 代码示例，您应该将所有 &lt; 替换为 &lt;，并将所有 &gt; 替换为 &gt;。

您如何仅使用 JavaScript 自动执行该过程？

【问题讨论】：

【解决方案1】：

如果您将代码放在 <xmp> 元素中，则无需转义 HTML 特殊字符，如 tests 中所示

 <h1>HTML using XMP</h1>
 <xmp class="prettyprint" id="htmlXmp"
 ><html>
   <head>
     <title>Fibonacci number</title>
   </head>
   <body>
     <noscript>
       <dl>
         <dt>Fibonacci numbers</dt>
         <dd>1</dd>
         <dd>1</dd>
         <dd>2</dd>
         <dd>3</dd>
         <dd>5</dd>
         <dd>8</dd>
         &hellip;
       </dl>
     </noscript>

     <script type="text/javascript"><!--
 function fib(n) {
   var a = 1, b = 1;
   var tmp;
   while (--n >= 0) {
     tmp = a;
     a += b;
     b = tmp;
   }
   return a;
 }

 document.writeln(fib(10));
 // -->
     </script>
   </body>
 </html>
 </xmp>

【讨论】：

@Brett，只要您美化的 HTML 不包含字符串 "</xmp"，它就可以工作。
我什至不知道这样的标签存在oO
问题：xmp 已过时，出现垂直多余空间。
在引导样式覆盖美化方面存在一些问题。用
```
 ... 
```
包围解决
<xmp> HTML 标记现已过时。

【解决方案2】：

您可以使用 RegEx 对内容进行全局替换。

var regex = new RegExp("<", "g");
console.log(content.replace(regex, "&lt;"));

【讨论】：

您还需要正确转义 & 符号。