& lt; code>vs & lt; pre>vs & lt; samp>用于内联代码段和块代码段

我的网站将有一些内联代码(“当使用foo()函数…”)和一些块片段。这些往往是XML，并有很长的行，我更喜欢浏览器包装(即，我不想使用<pre>)。我还想把CSS格式放在块片段上。

似乎我不能同时使用<code>，因为如果我把CSS块属性放在它上面(用display: block;)，它会破坏内联代码段。

我很好奇人们是怎么做的。使用<code>为块，<samp>为内联?使用<code><blockquote>或类似的东西?

我希望实际的HTML尽可能简单，避免类，因为其他用户将维护它。

385130 次浏览
小开

可以换行的内联代码使用<code>，不能换行的块代码使用<pre><code>。<samp>是样本输出，所以我将避免使用它来表示样本代码(读者是输入)。这就是Stack Overflow所做的。

(更好的是，如果你想要易于维护，让用户以Markdown的方式编辑文章，那么他们不必记得使用<pre><code>。)

HTML5在" pre元素"中同意这一点:

pre元素表示预先格式化的文本块，其中的结构由排版约定而不是元素表示。

一些可以使用pre元素的例子:

  • 包括计算机代码片段，其结构根据该语言的约定指示。

[…]

为了表示一段计算机代码，pre元素可以与代码元素一起使用;为了表示计算机输出的一个块，前置单元可以与采样单元一起使用。类似地，可以在pre元素中使用kbd元素来指示用户要输入的文本。

在下面的代码片段中，给出了一个计算机代码示例。

<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>

小开

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

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

对于内联代码或:

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

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

小开
最佳答案

我完全忽略了一点:<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>&lt;code&gt;</code> tag.


<pre>
Here's a very long pre-formatted formatted using the &lt;pre&gt; 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>

http://jsfiddle.net/9mCN7/

小开

对于正常的内联<code>使用:

<code>...</code>

并且对于每个需要使用blocked <code>的地方

<code style="display:block; white-space:pre-wrap">...</code>

或者，定义一个<codenza>标记来分隔块<code>(没有类)

<script>
</script>
<style>
codenza, code {}     /*  noop mnemonic aide that codenza mimes code tag  */
codenza {display:block;white-space:pre-wrap}
</style>`
< p >测试: (注意:下面是一个使用data: URI协议/方案的小问题，因此，当剪切并粘贴到URL栏进行测试时，%0A nl格式代码是至关重要的，因此view-source: (ctrl- __abc6)在下面的每一个行之前与%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 &lt;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>
小开

显示HTML代码按原样，使用(过时的)<xmp>标记:

<xmp>
<div>
<input placeholder='write something' value='test'>
</div>
</xmp>

很遗憾这个标签已经弃用了，但它仍然可以在浏览器上工作，它是一个糟糕的标签。不需要逃离里面的任何东西。真高兴!

使用<textarea>标记显示HTML代码按原样:

<textarea readonly rows="4" style="background:none; border:none; resize:none; outline:none; width:100%;">
<div>
<input placeholder='write something' value='test'>
</div>
</textarea>

小开

考虑文本区域

人们通过谷歌发现这个，并寻找一个更好的方法来管理他们的片段的显示也应该考虑<textarea>，它提供了很多控制宽度/高度，滚动等。注意到@vsync提到了已弃用的标记<xmp>，我发现<textarea readonly>是显示HTML的绝佳替代品，无需转义其中的任何内容(除非</textarea>可能出现在其中)。

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

<textarea rows=5 cols=100 readonly>Example text with Newlines,
tabs & space,
html tags etc <b>displayed</b>.
However, note that &amp; still acts as an escape char..
Eg: &lt;u&gt;(text)&lt;/u&gt;
</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>

小开

考虑Prism.js: https://prismjs.com/#examples

它使<pre><code>工作，是有吸引力的。

小开

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

<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/

小开

下面是一个使用起来非常简单的普通的，非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标签，就像我上面所做的那样。


提交答案