-1

我想显示 html 代码，就像您在此处看到的一样。

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

并在不更改页面的情况下显示它。把它放在这样的盒子里。

这是如何实现的？

4

7 回答 7

2

我认为最好的方法是实际看看 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 标签artical。在大多数浏览器中，它还会将代码标签内的文本字体更改为单空格，这更像是代码！:)

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

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

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

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

可能值得一看！

希望这可以帮助！:)

于 2012-07-01T18:45:25.893 回答
1

你可以使用

&gt;

>

和

&lt;

<

于 2012-07-01T18:38:53.077 回答
1

这个网站可以帮助您解决您的特定问题。它将您的标签/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);
}
于 2012-07-01T18:41:34.103 回答
1

像这样使用编码版本：

&lt;textarea&gt;
    &lt;script id="ff"&gt;
        gdgdgs
    &lt;/script&gt;
&lt;/textarea&gt;
于 2012-07-14T03:35:57.033 回答
0

你是这个意思吗？

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

查找 HTML 实体。

于 2012-07-01T18:38:53.870 回答
0

是的，只需像这样包含它：

$(document).ready(function(){
  var a = '<textarea><script id="ff">gdgdgs</scrip'+'t></textarea>';
  $("div").css('background','red').text(a);
});
于 2012-07-01T18:45:29.027 回答
0

我使用<xmp>元素。

于 2012-07-01T18:52:38.763 回答