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

卡卡西Near2020-03-24

我的网站将有一些内联代码（“使用foo()函数时...”）和一些代码段。这些通常是XML，并且行很长，我希望浏览器将其包装起来（即，我不想使用<pre>）。我还想将CSS格式放在块片段上。

似乎我不能同时使用<code>这两种方法，因为如果将CSS块属性（带有display: block;）放在上面，它将破坏内联代码段。

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

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

阿飞Harry小胖2020/03/24 09:41:02

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

它使<pre><code>工作变得有吸引力。

JinJin飞云2020/03/24 09:41:02

考虑TextArea

人们通过Google找到此代码并寻找更好的方法来管理其代码片段的显示时，还应考虑<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>

小卤蛋2020/03/24 09:41:02

对于常规的内联<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协议/方案的脚本，因此%0Anl格式代码对于保留此类内容至关重要，例如在将其剪切并粘贴到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>

十三逆天2020/03/24 09:41:02

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

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

用于内联代码或：

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

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

小卤蛋樱2020/03/24 09:41:02

使用<code>内联代码可以包装和<pre><code>块代码不能换行。<samp>是用于示例输出的，因此我将避免使用它来表示示例代码（读者要输入）。这就是堆栈溢出的作用。

（更好的是，如果您希望易于维护，让用户以Markdown的形式编辑文章，则不必记住使用<pre><code>。）

HTML5 agrees with this in “the pre element”:

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>

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer