考虑文本区域

人们发现这个通过谷歌和寻找一个更好的方法来管理他们的片段的显示也应该考虑<textarea>，它提供了很多控制宽度/高度，滚动等。注意到@vsync提到了已弃用的标签<xmp>，我发现<textarea readonly>是一个很好的替代显示HTML而不需要转义里面的任何东西(除了</textarea>可能出现在里面)。

例如，要显示带有控制换行的单行，考虑<textarea rows=1 cols=100 readonly>您的html或其他任何字符，包括制表符和CrLf的</textarea>。

<textarea rows=5 cols=100 readonly>带换行符的文本示例 制表符和空格， HTML标签etc <b>显示</b>。 然而，请注意&仍然作为转义char.. 例如:& lt;标签;(文本)& lt; /标签; textarea > < /

为了比较所有的……

<h2>Compared: TEXTAREA, XMP, PRE, SAMP, CODE</h2> <p>Note that CSS can be used to override default fixed space fonts in each or all these.</p> <textarea rows=5 cols=100 readonly>TEXTAREA: Example text with Newlines, tabs & space, html tags etc <b>displayed natively</b>. However, note that &amp; still acts as an escape char.. Eg: &lt;u&gt;(text)&lt;/u&gt;</textarea> <xmp>XMP: Example text with Newlines, tabs & space, html tags etc <b>displayed natively</b>. However, note that &amp; (&) will not act as an escape char.. Eg: &lt;u&gt;(text)&lt;/u&gt; </xmp> <pre>PRE: Example text with Newlines, tabs & space, html tags etc <b>are interpreted, not displayed</b>. However, note that &amp; still acts as an escape char.. Eg: &lt;u&gt;(text)&lt;/u&gt; </pre> <samp>SAMP: Example text with Newlines, tabs & space, html tags etc <b>are interpreted, not displayed</b>. However, note that &amp; still acts as an escape char.. Eg: &lt;u&gt;(text)&lt;/u&gt; </samp> <code>CODE: Example text with Newlines, tabs & space, html tags etc <b>are interpreted, not displayed</b>. However, note that &amp; still acts as an escape char.. Eg: &lt;u&gt;(text)&lt;/u&gt; </code>

这是一个简单的、非JavaScript的HTML解决方案，使用起来非常简单，优于使用<pre>和<code>元素，或者总是过度使用的笨重的JavaScript解决方案。我已经用这个技巧20年了!它适用于所有浏览器，无论新旧。现在的孩子只是没有学会旧的方式。

它允许用户快速剪切和粘贴代码示例。它还允许您快速地将代码放入HTML元素中，无需转义所有<和>字符，而您通常在使用<code>时必须这样做。

使用<textarea>元素共享代码，如下所示:

<textarea class="code" contenteditable="true" spellcheck="false" aria-label='Code Sample'>
  My Sample Bookmark:
  <a href="#bookmark1" id="b1" title="View my bookmark" target="_blank" rel="noreferrer nofollow noopener" accesskey="a" tabindex="0" aria-label="Bookmark">Got to My Bookmark</a>
</textarea>

.．.用一些简单的CSS样式…

<style>
        textarea.code {
            display: block;
            width: 90%;
            min-height: 5em;
            overflow-y: auto;
            overflow-x: hidden;
            font-family: monospace;
            border: 1px solid #bbb;
            padding: 1em;
            white-space:pre-wrap;
        }
</style>

注意，它看起来像普通的单行<code>，但它是块级的，尊重<pre>这样的文本格式，长文本现在换行了，代码框大小是可控的，并允许更灵活地显示大型HTML或脚本块，用户可以更容易地访问。

顺便说一句……您仍然可以使用<pre><code>。对于较小的例子，我仍然这样做。不要担心使用<textarea>的语义或可访问性问题，因为它是一个替换的元素，具有更通用的用途。如果您担心，那么只需向<textarea>添加一个ARIA标签，就像我上面所做的那样。

这适用于我在前端显示代码:

<style>
.content{
    height:50vh;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    resize: none;
    outline: none;
}
.content:focus{
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
</style>

<textarea class="content">
<div>my div</div><p>my paragraph</p>
</textarea>

查看现场演示:https://jsfiddle.net/bytxj50e/

我完全错过了:<pre>的非包装行为可以用CSS控制。这给出了我想要的结果:

代码{ 背景:hsl(220, 80%， 90%); ｝ {前 空白:pre-wrap; 背景:高速逻辑(30、80%、90%); ｝ 下面的例子演示了<code>&lt;code&gt;</code>标签。 < >之前 这是一个很长的预格式化格式使用&lt;标签。注意到它是如何换行的吗?没完没了，没完没了，没完没了…… < / >之前

http://jsfiddle.net/9mCN7/

就我个人而言，我会使用<code>，因为这在语义上是最正确的。然后，为了区分内联代码和块代码，我添加了一个类:

<code class="inlinecode"></code>

对于内联代码或:

<code class="codeblock"></code>

用于代码块。这取决于哪一种不太常见。

考虑文本区域

人们发现这个通过谷歌和寻找一个更好的方法来管理他们的片段的显示也应该考虑<textarea>，它提供了很多控制宽度/高度，滚动等。注意到@vsync提到了已弃用的标签<xmp>，我发现<textarea readonly>是一个很好的替代显示HTML而不需要转义里面的任何东西(除了</textarea>可能出现在里面)。

例如，要显示带有控制换行的单行，考虑<textarea rows=1 cols=100 readonly>您的html或其他任何字符，包括制表符和CrLf的</textarea>。

<textarea rows=5 cols=100 readonly>带换行符的文本示例 制表符和空格， HTML标签etc <b>显示</b>。 然而，请注意&仍然作为转义char.. 例如:& lt;标签;(文本)& lt; /标签; textarea > < /

为了比较所有的……

<h2>Compared: TEXTAREA, XMP, PRE, SAMP, CODE</h2> <p>Note that CSS can be used to override default fixed space fonts in each or all these.</p> <textarea rows=5 cols=100 readonly>TEXTAREA: Example text with Newlines, tabs & space, html tags etc <b>displayed natively</b>. However, note that &amp; still acts as an escape char.. Eg: &lt;u&gt;(text)&lt;/u&gt;</textarea> <xmp>XMP: Example text with Newlines, tabs & space, html tags etc <b>displayed natively</b>. However, note that &amp; (&) will not act as an escape char.. Eg: &lt;u&gt;(text)&lt;/u&gt; </xmp> <pre>PRE: Example text with Newlines, tabs & space, html tags etc <b>are interpreted, not displayed</b>. However, note that &amp; still acts as an escape char.. Eg: &lt;u&gt;(text)&lt;/u&gt; </pre> <samp>SAMP: Example text with Newlines, tabs & space, html tags etc <b>are interpreted, not displayed</b>. However, note that &amp; still acts as an escape char.. Eg: &lt;u&gt;(text)&lt;/u&gt; </samp> <code>CODE: Example text with Newlines, tabs & space, html tags etc <b>are interpreted, not displayed</b>. However, note that &amp; still acts as an escape char.. Eg: &lt;u&gt;(text)&lt;/u&gt; </code>