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

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

似乎我不能同时使用<code>，因为如果我把CSS块属性放在上面(用display: block;)，它会破坏内联代码段。

我很好奇人们是怎么做的。使用<code>块，和<samp>内联?使用<code><blockquote>或类似的东西?

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

当前回答

对于正常内联<代码>使用:

<code>...</code>

并且对于需要使用blocked <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协议/方案的小规则，因此%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>

2015-08-02 19:06:37

其他回答

考虑文本区域

人们发现这个通过谷歌和寻找一个更好的方法来管理他们的片段的显示也应该考虑<textarea>，它提供了很多控制宽度/高度，滚动等。注意到@vsync提到了已弃用的标签<xmp>，我发现<textarea readonly>是一个很好的替代显示HTML而不需要转义里面的任何东西(除了</textarea>可能出现在里面)。

例如，要显示带有控制换行的单行，考虑<textarea rows=1 cols=100 readonly>您的html或其他任何字符，包括制表符和CrLf的</textarea>。

<textarea rows=5 cols=100 readonly>带换行符的文本示例制表符和空格， HTML标签etc <b>显示</b>。然而，请注意&仍然作为转义char.. 例如:& lt;标签;(文本)& lt; /标签; 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 & 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>

2018-03-19 20:16:42

显示HTML代码，使用(过时的)<xmp>标记:

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

很遗憾这个标签已经弃用了，但它仍然可以在浏览器上工作，它是一个糟糕的标签。不需要逃离里面的任何东西。真高兴!

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

<textarea readonly rows="4" style="background:none;边界:没有;调整:没有;大纲:没有;宽度:100%;" > < div > <input placeholder='write something' value='test'> < / div > textarea > < /

2017-01-28 16:29:09

我完全错过了:<pre>的非包装行为可以用CSS控制。这给出了我想要的结果:

代码{ 背景:hsl(220, 80%， 90%); ｝ {前空白:pre-wrap; 背景:高速逻辑(30、80%、90%); ｝下面的例子演示了<code><code></code>标签。 < >之前这是一个很长的预格式化格式使用<标签。注意到它是如何换行的吗?没完没了，没完没了，没完没了…… < / >之前

http://jsfiddle.net/9mCN7/

2011-11-29 06:11:30

对于正常内联<代码>使用:

<code>...</code>

并且对于需要使用blocked <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: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>

2015-08-02 19:06:37

这适用于我在前端显示代码:

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

2020-10-04 21:23:53

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

推荐文章

最新文章

标签