我的网站将有一些内联代码（“使用foo()函数时...”）和一些块代码段。这些往往是XML，并且有很长的行，我更喜欢浏览器包装（即，我不想使用<pre>）。我还想在块片段上添加CSS格式。
似乎我不能同时使用<code>，因为如果我在其上放置CSS块属性（使用display: block;），它将破坏内联片段。
我很好奇人们在做什么。使用<code>表示块，<samp>表示内联？使用<code><blockquote>或类似的东西？
我想让实际的HTML尽可能简单，避免使用类，因为其他用户会维护它。
答案 0 :(得分：321)
对于可以换行的内联代码使用<code>，对于不能换行的块代码使用<pre><code>。 <samp>用于示例输出，因此我会避免使用它来表示示例代码（读者将输入）。这就是Stack Overflow的功能。
（更好的是，如果你想要易于维护，让用户将文章编辑为Markdown，那么他们就不必记得使用<pre><code>。）
HTML5在“the pre element”：
pre元素表示预格式化文本块，其中结构由印刷约定而不是元素表示。
可以使用pre元素的一些示例：
- 包括计算机代码片段，其结构根据该语言的惯例表示。
[...]
为了表示计算机代码块，pre元素可以与代码元素一起使用;为了表示计算机输出块，pre元素可以与samp元素一起使用。类似地，kbd元素可以在pre元素中使用，以指示用户要输入的文本。
在下面的代码段中，提供了一个计算机代码示例。
<p>This is the <code>Panel</code> constructor:</p> <pre><code>function Panel(element, canClose, closeHandler) { this.element = element; this.canClose = canClose; this.closeHandler = function () { if (closeHandler) closeHandler() }; }</code></pre>
答案 1 :(得分：71)
我完全错过的东西：<pre>的非包装行为可以用CSS控制。所以这给出了我想要的确切结果：
code {
background: hsl(220, 80%, 90%);
}
pre {
white-space: pre-wrap;
background: hsl(30,80%,90%);
}Here's an example demonstrating the <code><code></code> tag.
<pre>
Here's a very long pre-formatted formatted using the <pre> tag. Notice how it wraps? It goes on and on and on and on and on and on and on and on and on and on...
</pre>
答案 2 :(得分：36)
我个人使用<code>，因为这是最正确的语义。然后，为了区分内联代码和块代码，我要添加一个类：
<code class="inlinecode"></code>
用于内联代码或：
<code class="codeblock"></code>
代码块。取决于哪种不太常见。
答案 3 :(得分：14)
<xmp>标记显示HTML代码，按原样：<xmp>
<input placeholder='write something' value='test'>
</xmp>很遗憾这个标签已被弃用，但是它仍然适用于浏览器，它是一个坏标签。没有必要逃避它内部的任何东西。多么快乐！
答案 4 :(得分：13)
对于正常内联<code>使用：
<code>...</code>
并且对于需要阻止<code>的每个地方，使用
<code style=display:block;white-space:pre-wrap>...</code>
或者，为明细衬砌块<code>（无类别）定义<codenza>标记
<script>
</script>
<style>
codenza, code {} /* noop mnemonic aide that codenza mimes code tag */
codenza {display:block;white-space:pre-wrap}
</style>`
测试：
（注意：以下是使用data: URI协议/方案的scURIple，因此%0A nl格式代码必需保留，当剪切并粘贴到URL栏时用于测试 - 所以view-source:（ ctrl - U ）在下面的每个行之前看起来很好%0A）
data:text/html;charset=utf-8,<html >
<script>document.write(window.navigator.userAgent)</script>
<script></script>
<style>
codenza, code {} /* noop mnemonic aide that codenza mimes code tag */
codenza {display:block;white-space:pre-wrap}
</style>
<p>First using the usual <code> tag
<code>
%0A function x(arghhh){
%0A return "a very long line of text that will extend the code beyond the boundaries of the margins, guaranteed for the most part, well maybe without you as a warrantee (except in abnormally conditioned perverse environs in which case a warranty is useless)"
%0A }
</code>
and then
<p>with the tag blocked using pre-wrapped lines
<code style=display:block;white-space:pre-wrap>
%0A function x(arghhh){
%0A return "a very long line of text that will extend the code beyond the boundaries of the margins, guaranteed for the most part, well maybe without you as a warrantee (except in abnormally conditioned perverse environs in which case a warranty is useless)"
%0A }
</code>
<br>using an ersatz tag
<codenza>
%0A function x(arghhh){
%0A return "a very long line of text that will extend the code beyond the boundaries of the margins, guaranteed for the most part, well maybe without you as a warrantee (except in abnormally conditioned perverse environs in which case a warranty is useless)"
%0A }
</codenza>
</html>
答案 5 :(得分：4)
考虑TextArea
人们通过Google发现这一点，并寻找更好的方法来管理其代码段的显示，还应考虑<textarea>，它可以对宽度/高度进行大量控制，滚动等。注意@vsync提到了已弃用的内容标记<xmp>，我发现<textarea readonly>是显示HTML的绝佳替代品，无需在其中转义任何内容（除非</textarea>可能出现在其中）。
例如，要显示包含受控换行的单行，请考虑<textarea rows=1 cols=100 readonly> 您的html或其他字符，包括制表符和CrLf＆＃39> </textarea>。
<textarea rows=5 cols=100 readonly>Example text with Newlines,
tabs & space,
html tags etc <b>displayed</b>.
However, note that & still acts as an escape char..
Eg: <u>(text)</u>
</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 & still acts as an escape char..
Eg: <u>(text)</u></textarea>
<xmp>XMP: Example text with Newlines,
tabs & space,
html tags etc <b>displayed natively</b>.
However, note that & (&) will not act as an escape char..
Eg: <u>(text)</u>
</xmp>
<pre>PRE: Example text with Newlines,
tabs & space,
html tags etc <b>are interpreted, not displayed</b>.
However, note that & still acts as an escape char..
Eg: <u>(text)</u>
</pre>
<samp>SAMP: Example text with Newlines,
tabs & space,
html tags etc <b>are interpreted, not displayed</b>.
However, note that & still acts as an escape char..
Eg: <u>(text)</u>
</samp>
<code>CODE: Example text with Newlines,
tabs & space,
html tags etc <b>are interpreted, not displayed</b>.
However, note that & still acts as an escape char..
Eg: <u>(text)</u>
</code>
答案 6 :(得分：3)
这是一个纯文本、非 JavaScript 化的 HTML 解决方案，它使用起来非常简单，而且优于使用 <pre> 和 <code> 元素，或者是笨手笨脚的 JavaScript总是矫枉过正的解决方案。我已经使用这个技巧20年了！它适用于所有新旧浏览器。今天的孩子们只是没能学会旧的方法。
它允许您的用户快速剪切和粘贴代码示例。它还允许您快速、轻松地将代码放入 HTML 元素中，而无需转义使用 < 时通常必须执行的所有 > 和 <code> 字符。< /p>
使用 <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 标签，就像我上面所做的那样。
答案 7 :(得分：2)
考虑Prism.js：https://prismjs.com/#examples
它使<pre><code>正常工作并且具有吸引力。
答案 8 :(得分：0)
这对我来说可以在前端显示代码：
<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>