<code> vs <pre> vs <samp> 用于内联和块代码片段

Posted 2023-03-05

技术标签:

【中文标题】<code> vs <pre> vs <samp> 用于内联和块代码片段【英文标题】：<code> vs <pre> vs <samp> for inline and block code snippets 【发布时间】：2011-06-04 10:32:02 【问题描述】：

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

似乎我不能同时使用<code>，因为如果我将CSS块属性放在它上面（使用display: block;），它会破坏内联sn-ps。

我很好奇人们在做什么。将<code> 用于块，将<samp> 用于内联？使用<code><blockquote> 或类似的东西？

我想让实际的 html 尽可能简单，避免使用类，因为其他用户将维护它。

【问题讨论】：

使用谷歌浏览器并检查 Rick Strahl 的博客：weblog.west-wind.com/posts/2016/May/23/… 然后使用他的样式表属性。他的代码 sn-ps 非常干净，易于复制/阅读。 <pre> 及其行为可以记为“precisely” @snr 那是不合理的 【参考方案1】：

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

（更好的是，如果你想要易于维护，让用户将文章编辑为 Markdown，那么他们就不必记住使用<pre><code>。）

HTML5 在“the pre element” 中同意这一点：

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

可以使用前置元素的一些例子：

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

[…]

为了表示一段计算机代码，pre元素可以和code元素一起使用；为了表示计算机输出块，pre 元素可以与 samp 元素一起使用。类似地，kbd 元素可以用在 pre 元素中，表示用户要输入的文本。

在下面的 sn-p 中，展示了一个计算机代码示例。

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

【讨论】：

这可能是正确的方法，但我仍然认为它很愚蠢。 HTML 开发人员预见到<code> 标记的需求，但决定我们只写一行？或者我猜，因为他们不想有两个标签，一个块和一个内联？仍然......用CSS制作<code>块级有什么问题？我认为我们应该编写“语义”HTML。 <code> 是好的和语义的，但 <pre> 不是很多。我不同意。与预格式化文本相反的是文档中的纯旧文本。使用 CSS 制作 <code> 块级是没有语义的。这边是recommended in HTML5。 <pre> 的问题是它也修改了空白处理：保留所有空格，并关闭换行。除非有办法关闭它？ @Steve Bennett，在 CSS white-space: normal; 虽然我不明白你为什么要为代码这样做。这<pre><code> 的事情也很愚蠢，<pre> 标记在标准中被非常清楚地定义为@jleedev 提到的“计算机代码”（和其他东西）。是因为您认为<code> 是一个更好的名字吗？抱歉，这并没有使它更具语义。标签 <address> 也有类似的情况，它听起来不像“作者”，但标准说这就是它的用途，所以它就是这样。 -1。 OP 的中心问题是关于如何完成块 sn-ps 包装。您已经解决了内联代码以及必须不换行的块代码，但这并没有解决 OP 的主要问题。【参考方案2】：

我完全错过了：<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/

【讨论】：

【参考方案3】：

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

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

对于内联代码或：

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

用于代码块。取决于哪个不太常见。

【讨论】：

是的，我也开始这么认为了。我确实要求过没有课程的解决方案，但似乎没有一个好的解决方案。 @Steve：主要是为最常见的用例定义一个没有类的默认<code> 块。然后任何想要做不寻常的事情的人只需要添加类。以任何其他方式执行此操作仍会要求用户输入额外内容。这样用户可以将其视为添加特殊标签而不是使用完全不同的结构。【参考方案4】：

显示 HTML 代码，原样，使用（过时的）`<xmp>` 标签：

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

很遗憾这个标签已被弃用，但是它仍然可以在浏览器上运行，它是一个糟糕的标签。无需逃避其中的任何东西。多么快乐！

显示 HTML 代码，原样，使用 `<textarea>` 标签：

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

【讨论】：

我肯定遗漏了一些东西，但显然，这是我找到的在 WordPress/php 模板中显示原始 HTML 代码（用于调试目的）的唯一方法...... @user1863152 - 这是一个非常糟糕的使用 textarea 恕我直言，因为外部脚本无法突出显示代码，例如 Prism。而且，它不适合内容的高度和宽度，就像<xmp> 或任何其他block 元素一样。我不建议将其作为真正的解决方案，仅作为理论上的解决方案。 @vsync，是的，这是课程的马匹（顺便说一句，我给了你一个赞成票）。我使用 textarea 来满足我的需要。我尝试了 xmp，但不记得为什么我发现 xmp 不能满足我的需求。当然，它的弃用状态肯定会令人沮丧。当我需要突出显示和 CODE 以供内联使用时，我使用 PRE。我无法想象 Prism 如何在 XMP 中突出显示——一些 CSS 魔法？我不太确定这一点。是的，它有效，但自 3.2 起已弃用并在 5 中完全删除？虽然从浏览器中完全删除的标签并不多 - <blink> 就是一个例子 - 我会担心将它用于任何需要面向未来的东西。【参考方案5】：

对于普通的内联 <code> 使用：

<code>...</code>

对于每个需要阻止<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>`

测试：（注意：以下是使用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 &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>

【讨论】：

【参考方案6】：

考虑 TextArea

人们通过 Google 找到这个并寻找更好的方法来管理他们的 sn-ps 的显示也应该考虑<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>

【讨论】：

【参考方案7】：

这是一个 PLAIN、非 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> 的语义或可访问性问题，因为它是一个被替换的元素并且具有更多用途。如果您担心，只需将 ARIA 标签添加到您的 <textarea>，就像我在上面所做的那样。

【讨论】：

【参考方案8】：

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

它使<pre><code> 工作并且很有吸引力。

【讨论】：

【参考方案9】：

这对我来说可以在前端显示代码：

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

【讨论】：

以上是关于<code> vs <pre> vs <samp> 用于内联和块代码片段的主要内容，如果未能解决你的问题，请参考以下文章

exception

带有水平滚动条的 pre/code 元素破坏了 Firefox 上的 flex 布局

Mac OS重置管理员账号方法

CentOS部署Jenkins-WAR包（方法1）

如何使 Twitter Bootstrap 的 <pre> 块水平滚动？

第三方登录,授权,分享