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

Question

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

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

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

如何实现的？

Answer 1

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

如果您在Chrome中的代码框上单击鼠标右键，然后选择检查元素，它将为您显示该框的标记。 做到这一点非常有用，显然不是要使人们失望，而是要学习其他人如何将网站组合在一起，以及它们如何实现酷炫的效果，例如代码框！ :)

不过，有趣的是，如果您仅在页面上单击鼠标右键并查看source ，您将看到略有不同的内容：

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

因此，我们可以在这里看到，这就是在页面加载和运行任何JavaScript之前该框的标记。 当页面开始在客户端上加载时，将运行一些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>

可能值得一看！

希望这可以帮助！ :)

Answer 2

你可以用

>

>

和

< 

<

Answer 3

这个网站在这里可以帮助您与您的特殊问题。 它将您的标签/ 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

像这样使用编码版本：

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

Answer 5

你是这个意思吗？

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

查找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>元素。