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

Question

提问by Steve Bennett

My site is going to have some inline code ("when using the foo()function...") and some block snippets. These tend to be XML, and have very long lines which I prefer the browser to wrap (i.e., I don't want to use <pre>). I'd also like to put CSS formatting on the block snippets.

我的网站将有一些内联代码（“使用该foo()函数时...”）和一些块片段。这些往往是 XML，并且有很长的行，我更喜欢浏览器包装（即，我不想使用<pre>）。我还想将 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? Use <code><blockquote>or something similar?

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

I'd like to keep the actual HTML as simple as possible, avoiding classes, as other users will be maintaining it.

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

Answer 1

采纳答案by Steve Bennett

Something I completely missed: the non-wrapping behaviour of <pre>can be controlled with CSS. So this gives the exact result I was looking for:

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

Answer 2

回答by Josh Lee

Use <code>for inline code that can wrap and <pre><code>for block code that must not wrap. <samp>is for sample output, so I would avoid using it to represent sample code (which the reader is to input). This is what Stack Overflow does.

使用<code>内联代码可以包装和<pre><code>块代码不能换行。<samp>用于示例输出，所以我会避免使用它来表示示例代码（读者要输入的代码）。这就是 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 preelement”:

HTML5 在“pre元素”中同意这一点：

The pre element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.
Some examples of cases where the pre element could be used:
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; to represent a block of computer output the pre element can be used with a samp element. Similarly, the kbd element can be used within a pre element to indicate text that the user is to enter.
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>

pre 元素表示一块预先格式化的文本，其中的结构由排版约定而不是由元素表示。
可以使用 pre 元素的一些示例：
包括计算机代码片段，其结构根据该语言的约定指示。
[…]
为了表示一个计算机代码块，pre 元素可以与 code 元素一起使用；为了表示计算机输出块，可以将 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>

Answer 3

回答by slebetman

Personally I'd use <code>because that's the most semantically correct. Then to differentiate between inline and block code I'd add a class either:

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

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

for inline code or:

对于内联代码或：

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

for code block. Depending on which is less common.

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

Answer 4

回答by ekim

For normal inlined <code>use:

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

<code>...</code>

and for each and every place where blocked <code>is needed use

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

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

Alternatively, define a <codenza>tag for break lining block <code>(no classes)

或者，<codenza>为中断衬砌块定义一个标签<code>（无类）

<script>
</script>
<style>
  codenza, code {}     /*  noop mnemonic aide that codenza mimes code tag  */
  codenza {display:block;white-space:pre-wrap}
</style>`

Testing: (NB: the following is a scURIple utilizing a data:URI protocol/scheme, therefore the %0Anl format codes are essentialin preserving such when cut and pasted into the URL bar for testing - so view-source:(ctrl-U) looks good preceed everyline below with %0A)

测试：（注意：以下是使用data:URI 协议/方案的 scURIple ，因此当剪切并粘贴到 URL 栏进行测试时，%0Anl 格式代码对于保留此类代码至关重要- 因此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>

Answer 5

回答by vsync

Show HTML code, as-is, using the (obsolete) `<xmp>`tag:

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

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

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

It is very sad this tag has been deprecated, butit does still works on browsers, it it is a bad-ass tag. no need to escape anything inside it. What a joy!

很遗憾这个标签已被弃用，但它仍然适用于浏览器，它是一个糟糕的标签。不需要逃避里面的任何东西。多么快乐！

Show HTML code, as-is, using the `<textarea>`tag:

使用标记按原样显示 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>

Answer 6

回答by www-0av-Com

Consider 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's</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>

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

Answer 7

回答by Michael Cole

Consider Prism.js: https://prismjs.com/#examples

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

It makes <pre><code>work and is attractive.

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

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

提问by Steve Bennett

采纳答案by Steve Bennett

回答by Josh Lee

回答by slebetman

回答by ekim

回答by vsync

Show HTML code, as-is, using the (obsolete) `<xmp>`tag:

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

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

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

Show HTML code, as-is, using the `<textarea>`tag:

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

回答by www-0av-Com

回答by Michael Cole

相关推荐

最近更新

标签

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

提问by Steve Bennett

采纳答案by Steve Bennett

回答by Josh Lee

回答by slebetman

回答by ekim

回答by vsync

Show HTML code, as-is, using the (obsolete) <xmp>tag:

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

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

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

Show HTML code, as-is, using the <textarea>tag:

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

回答by www-0av-Com

回答by Michael Cole

相关推荐

Html 如何使父 div 自动调整到其子 div 的宽度

Html 如何将表格样式设置为容器的全宽并使单元格使用宽度的百分比？

Html 使用 javascript 删除 iframe

Html 'aria-descriptionby' 属性的含义是什么？

相关推荐

最近更新

标签

Show HTML code, as-is, using the (obsolete) `<xmp>`tag:

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

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

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

Show HTML code, as-is, using the `<textarea>`tag:

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