对于内联和块代码片段，＜code＞ vs ＜pre＞ vs ＜samp＞

爱被打了一巴掌 2023-03-02 13:19 1阅读 0赞

本文翻译自：[`vs`][vs]

vs for inline and block code snippets

[``][vs]

*My site is going to have some inline code ("when using the `foo()` function...") and some block snippets.* **我的网站将有一些内联代码（“使用`foo()`函数时...”）和一些块代码片段。** *These tend to be XML, and have very long lines which I prefer the browser to wrap (ie, I don't want to use `<pre>` ).* **这些往往是XML，并且有很长的行，我更喜欢浏览器换行（即，我不想使用`<pre>` ）。** *I'd also like to put CSS formatting on the block snippets.* **我还想在块片段上放置CSS格式。**

*It seems that I can't use `<code>` for both, because if I put CSS block attributes on it (with `display: block;` ), it will break the inline snippets.* **似乎我不能同时使用`<code>` ，因为如果我在其上放置CSS块属性（使用`display: block;` ），它将破坏内联片段。**

*I'm curious what people do.* **我很好奇人们在做什么。** *Use `<code>` for blocks, and `<samp>` for inline?* **使用`<code>`表示块， `<samp>`表示内联？** *Use `<code><blockquote>` or something similar?* **使用`<code><blockquote>`或类似的东西？**

*I'd like to keep the actual HTML as simple as possible, avoiding classes, as other users will be maintaining it.* **我想保持实际的HTML尽可能简单，避免类，因为其他用户将维护它。**

--------------------

### \#1楼 ###

参考：[https://stackoom.com/question/JLgV/对于内联和块代码片段-code-vs-pre-vs-samp][https_stackoom.com_question_JLgV_-code-vs-pre-vs-samp]

--------------------

### \#2楼 ###

*For normal inlined `<code>` use:* **对于正常的内联`<code>`使用：**

*and for each and every place where blocked `<code>` is needed use* **并且对于需要阻止`<code>`每个地方使用**

--------------------

*Alternatively, define a [`<codenza>`][codenza] tag for break lining block `<code>` (no classes)* **或者，为break lining block `<code>`定义[`<codenza>`][codenza]标记（无类）**

--------------------

*Testing: (NB: the following is a scURIple utilizing a `data:` URI protocol/scheme, therefore the `%0A` nl format codes are essential in preserving such when cut and pasted into the URL bar for testing - so `view-source:` ( ctrl \- U ) looks good preceed every line below with `%0A` )* **测试:(注意：以下是使用`data:`的scURIple `data:` URI协议/方案，因此`%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>

--------------------

### \#3楼 ###

## *Show HTML code, **as-is** , using the (obsolete) [`<xmp>`][xmp] tag:* **使用（过时的） [`<xmp>`][xmp]标记按原样显示HTML代码：** ##

##  ##

*It is very sad this tag has been deprecated, but it does still works on browsers, it it is a bad-ass tag.* **很遗憾这个标签已被弃用， *但*它仍然适用于浏览器，它是一个糟糕的标签。** *no need to escape anything inside it.* **没有必要逃避它内部的任何东西。** *What a joy!* **真高兴啊！**

--------------------

### \#4楼 ###

*Use `<code>` for inline code that can wrap and `<pre><code>` for block code that must not wrap.* **使用`<code>`表示可以换行的内联代码，使用`<code>` `<pre><code>`表示不能换行的块代码。** *`<samp>` is for sample output , so I would avoid using it to represent sample code (which the reader is to input ).* **`<samp>`用于示例*输出* ，因此我将避免使用它来表示示例代码（读者要*输入的*代码）。** *This is what Stack Overflow does.* **这就是Stack Overflow的功能。**

*(Better yet, if you want easy to maintain, let the users edit the articles as Markdown, then they don't have to remember to use `<pre><code>` .)* **（更好的是，如果你想要易于维护，让用户将文章编辑为Markdown，那么他们就不必记得使用`<pre><code>` 。）**

*HTML5 agrees with this in [“the `pre` element”][the _pre_ element] :* **HTML5在[“ `pre` element”中][the _pre_ element]同意这一点：**

> *The pre element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.* **pre元素表示预格式化文本块，其中结构由印刷约定而不是元素表示。**
> 
> *Some examples of cases where the pre element could be used:* **可以使用pre元素的一些示例：**
> 
>  *  *Including fragments of computer code, with structure indicated according to the conventions of that language.* **包括计算机代码的片段，其结构根据该语言的惯例表示。**
> 
> *\[…\]* **\[...\]**
> 
> *To represent a block of computer code, the pre element can be used with a code element;* **为了表示计算机代码块，pre元素可以与代码元素一起使用;** *to represent a block of computer output the pre element can be used with a samp element.* **为了表示计算机输出块，pre元素可以与samp元素一起使用。** *Similarly, the kbd element can be used within a pre element to indicate text that the user is to enter.* **类似地，可以在pre元素内使用kbd元素来指示用户要输入的文本。**
> 
> *In the following snippet, a sample of computer code is presented.* **在下面的代码段中，提供了一个计算机代码示例。**
> 
>     <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>

--------------------

### \#5楼 ###

*Personally I'd use `<code>` because that's the most semantically correct.* **我个人使用`<code>`因为这是最正确的语义。** *Then to differentiate between inline and block code I'd add a class either:* **然后，为了区分内联代码和块代码，我要添加一个类：**

*for inline code or:* **对于内联代码或：**

*for code block.* **用于代码块。** *Depending on which is less common.* **取决于哪个不太常见。**

--------------------

### \#6楼 ###

***Consider TextArea*** **考虑TextArea**

*People finding this via Google and looking for a better way to manage the display of their snippets should also consider `<textarea>` which gives a lot of control over width/height, scrolling etc. Noting that @vsync mentioned the deprecated tag `<xmp>` , I find `<textarea readonly>` is an excellent substitute for displaying HTML without the need to escape anything inside it (except where `</textarea>` might appear within).* **通过谷歌找到这个并寻找更好的方法来管理他们的片段显示的人也应该考虑`<textarea>` ，它可以控制宽度/高度，滚动等。注意@vsync提到了弃用的标签`<xmp>` ，我发现`<textarea readonly>`是显示HTML的绝佳替代品，无需在其中转义任何内容（除非`</textarea>`可能出现在其中）。**

*For example, to display a single line with controlled line wrapping, consider `<textarea rows=1 cols=100 readonly>` your html or etc with any characters including tabs and CrLf's `</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 & still acts as an escape char.. Eg: <u>(text)</u> </textarea>

*To compare all...* **要比较所有......**

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

[vs]: https://oldbug.net/q/JLgV/code-vs-pre-vs-samp-for-inline-and-block-code-snippets
[https_stackoom.com_question_JLgV_-code-vs-pre-vs-samp]: https://stackoom.com/question/JLgV/%E5%AF%B9%E4%BA%8E%E5%86%85%E8%81%94%E5%92%8C%E5%9D%97%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5-code-vs-pre-vs-samp
[codenza]: https://en.wikipedia.org/wiki/Cadenza
[xmp]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp
[the _pre_ element]: http://www.w3.org/TR/html5/grouping-content.html#the-pre-element