如何在页面中显示和格式化 HTML 代码

<textarea><script id="ff">gdgdgs</script></textarea>

我认为最好的方法是实际看看，看看Stackoverflow是如何做到的！ :)

如果您在 Chrome 中右键单击代码框并选择检查元素，它将显示该框的标记。能够做到这一点非常有用，显然不是为了欺骗人们，而是了解其他人如何将网站放在一起，以及他们如何实现像代码框这样的酷炫效果！:)

有趣的是，如果你只是右键单击页面并转到查看源代码，你会看到一些略有不同的东西：

<pre><code>&lt;textarea&gt;&lt;script id="ff"&gt;gdgdgs&lt;/script&gt;&lt;/textarea&gt;
</code></pre>

因此，我们可以在这里看到，这是该框在页面加载和运行任何JavaScript之前的样子。当页面开始在客户端加载时，将运行一些 JavaScript，它采用上述标记并将其转换为您右键单击代码框并在 chrome 中检查它时看到的标记。这样做可以为您提供页面上 HTML 的实时视图：

<pre class="lang-php prettyprint">
    <code>
        <span class="tag">&lt;textarea&gt;&lt;script</span>
        <span class="pln"></span>
        <span class="atn">id</span>
        <span class="pun">=</span>
        <span class="atv">"ff"</span>
        <span class="tag">></span>
        <span class="pln">gdgdgs</span>
        <span class="tag">&lt;/script&gt;&lt;/textarea&gt;</span>
        <span class="pln"><br></span>
    </code>
</pre>

因此，如果您看一下，您可以看到转换后的代码使用了 pre 标签。这基本上是说，在这里之间的任何东西，你可以视为文字或换句话说，在我离开它们的地方保留换行符和空格！

除了使用 pre 标记来包装代码外，您还可以看到它们使用不同的 CSS 类。这是为了实现你可以看到的颜色编码。

他们还使用一个代码标签，据我所知，它与

pre 非常相似，只是它通过说在这个标签中，你应该期望看到代码来使您的标记更清晰一些。它可能比任何东西都更具语义性，就像 HTML 标记文章一样。在大多数浏览器中，它还会将代码标签内文本的字体更改为等宽，这更像代码！:)

你可以更深入地了解他们的CSS类是什么样子的，从这里你可以开始建立一个心理图，看看他们的标记和CSS如何协同工作，生产他们漂亮的代码框。

当然，如果你不想自己滚动这个功能，你可以使用别人的框架来实现这一点。语法荧光笔 例如，如果广泛使用并推荐。

使用语法荧光笔，

您只需引用语法高亮笔CSS和javascript，然后只需要将代码包装在一个pre标签中即可使其工作，如下所示：

<pre class="brush: xml">
     &lt;textarea&gt;&lt;script id="ff"&gt;gdgdgs&lt;/script&gt;&lt;/textarea&gt;
</pre>

可能值得一看！

希望这有帮助！ :)

你可以使用

>

>

和

< 

<

这个网站可以帮助你解决你的特定问题。它将你的标签/html/javascript转换为ASCII。如果您需要一个函数，就在这里。它将传递的标签/html/javascript转换为ASCII。ASCII 代码被浏览器转义并视为文本。您可以稍后使用生成的 ASCII 并将其添加到框中。

function stringToAscii(s)
{
  var ascii="";
  if(s.length>0)
    for(i=0; i<s.length; i++)
    {
      var c = ""+s.charCodeAt(i);
      while(c.length < 3)
       c = "0"+c;
      ascii += c;
    }
  return(ascii);
}

像这样使用编码版本：

<textarea>
    <script id="ff">
        gdgdgs
    </script>
</textarea>

这是你的意思吗？

<textarea><script id="ff">gdgdgs</script></textarea>

查找 HTML 实体。

是的，只需包含它：

$(document).ready(function(){
  var a = '<textarea><script id="ff">gdgdgs</scrip'+'t></textarea>';
  $("div").css('background','red').text(a);
});

我使用 <xmp> 元素。