vs 

 vs 用于内联代码和块代码片段</p>
  

    

      
      html
      
      HTML
      
    

    
卡卡西Near

    
2020-03-24

  

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



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



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



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

    
  </div>
  
第3165篇《 vs 
 vs 用于内联代码和块代码片段》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点</p>
  

    

  
  
共5个回答

  


    
    

    

        

          

            阿飞Harry小胖
            2020.03.24
          

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



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

        

        

          

            JinJin飞云
            2020.03.24
          

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

          
对于常规的内联<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
          

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



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




用于内联代码或：



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




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

        

        

          

            小卤蛋樱
            2020.03.24
          

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android