html < code>vs < pre>< samp>内联和块代码段的vs

mbjcgjjk 于 2023-02-02 发布在其他

关注(0)|答案(9)|浏览(200)

我的网站将有一些内联代码（“当使用foo()函数时......”）和一些块片段。这些往往是XML，并有很长的行，我喜欢浏览器 Package （即，我不想使用<pre>）。我还想把CSS格式的块片段。
看起来我不能同时使用<code>，因为如果我把CSS块属性放在它上面（使用display: block;），它会破坏内联代码段。
我很好奇人们是怎么做的。用<code>做块，用<samp>做内联？用<code><blockquote>还是类似的？
我希望保持实际的HTML尽可能简单，避免类，因为其他用户将维护它。

Html

来源：https://stackoverflow.com/questions/4611591/code-vs-pre-vs-samp-for-inline-and-block-code-snippets

9条答案

按热度按时间

ha5z0ras1#

<code>用于可以换行的内联代码，<pre><code>用于不能换行的块代码。<samp>用于sample * output *，所以我避免使用它来表示示例代码（读取器用于 * input *）。
（更好的是，如果你想易于维护，让用户编辑的文章作为Markdown，那么他们不必记得使用<pre><code>。
HTML5在"pre元素"中同意这一点：
pre元素表示一个预格式化文本块，其中的结构由排版约定而不是元素表示。
可以使用pre元素的一些情况示例：

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

[...]
为了表示计算机代码块，pre元素可以与code元素一起使用;要表示计算机输出的块，pre元素可以与samp元素一起使用。2类似地，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>

赞(0）回复(0）举报 2023-02-02

fae0ux8s2#

我完全忽略了：<pre>的非 Package 行为可以用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/

赞(0）回复(0）举报 2023-02-02

vhipe2zx3#

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

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

对于内联代码或：

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

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

赞(0）回复(0）举报 2023-02-02

sg24os4d4#

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

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

赞(0）回复(0）举报 2023-02-02

rslzwgfq5#

对于正常内联<code>用途：

<code>...</code>

并且对于需要阻塞<code>的每个位置使用

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

或者，为折线图块<code>定义<codenza>标记（无类）

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

测试：（注意：以下是一个使用data: URI协议/方案的示例，因此，当剪切并粘贴到URL栏中进行测试时，%0A nl格式代码对于保留此类代码是 * 必不可少的 *-因此，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>

赞(0）回复(0）举报 2023-02-02

u0njafvf6#

考虑文本区域

人们通过Google找到这个，并寻找一种更好的方式来管理他们的代码片段的显示，也应该考虑<textarea>，它提供了很多控制宽度/高度，滚动等注意，@vsync提到了过时的标签<xmp>，我发现<textarea readonly>是显示HTML的一个很好的替代品，而不需要转义其中的任何内容（</textarea>可能出现的位置除外）。
例如，要显示具有受控换行的单行，请考虑<textarea rows=1 cols=100 readonly> *your html或etc，其中包含任何字符，包括制表符和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>

赞(0）回复(0）举报 2023-02-02

uinbv5nw7#

这是一个简单的，非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>，就像我上面做的那样。

赞(0）回复(0）举报 2023-02-02

kuhbmx9i8#

以Prism.js为例：https://prismjs.com/#examples
它使<pre><code>工作，是有吸引力的。

赞(0）回复(0）举报 2023-02-02

zfycwa2u9#

这对我在前端显示代码起作用：

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

赞(0）回复(0）举报 2023-02-02

我来回答

html < code>vs < pre>< samp>内联和块代码段的vs

9条答案

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

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

相关问题

热门标签

最新问答

html < code>vs < pre>< samp>内联和块代码段的vs

9条答案

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

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

相关问题

热门标签

最新问答

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

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