Question

我想显示html代码，就像你在这里看到的一样。

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

并在不改变页面的情况下显示它。并且很好地放在这样的盒子里。

这是如何实现的？

Answer 1

我认为最好的方法是实际查看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类。这是为了实现您可以看到的颜色编码。

他们还使用 code 标签，据我所知，它与pre非常相似，只是通过在此标签中说明你的标记更清晰一点应该期待看到代码。它可能比任何东西都更具语义，比如HTML标签 artical 。在大多数浏览器中，它还会将代码标签内的文本字体更改为单声道空间，这样的代码更像！ :)

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

当然，如果你不想自己推出这个功能，你可以使用别人的框架来实现这一点。 SyntaxHighlighter例如，如果被广泛使用和推荐。

使用Syntax Highlighter，您只需引用语法Highlighter CSS和javascript，然后只需将代码包装在一个预标记中即可使其正常工作，如下所示：

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

值得一看！

希望这有帮助！：）

Answer 2

你可以使用

&gt;

＆GT;

和

&lt;

＆LT;

Answer 3

此网站here可以帮助您解决特定问题。它将您的标签/ 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);
}

Answer 4

使用像这样的编码版本：

&lt;textarea&gt;
    &lt;script id="ff"&gt;
        gdgdgs
    &lt;/script&gt;
&lt;/textarea&gt;

Answer 5

这是你的意思吗？

&lt;textarea&gt;&lt;script id=&quot;ff&quot;&gt;gdgdgs&lt;/script&gt;&lt;/textarea&gt;

查找HTML实体。

Answer 6

是的，只需将其包括在内：

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

Answer 7

我使用<xmp>元素。

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

7 个答案: