在HTML/CSS中顯示「代碼」部分的正確方法？

Question

有沒有「最好的方法」。有什麼東西讓代碼的一部分看起來像插圖？

例如，SO如何在帖子中顯示「代碼」部分？

我知道Bootstrap有「Wells」，但是當不使用它時，是否有一種特殊的功能方式看起來不錯？

Answer 1

對於那種事情，您可以使用標記pre或code。

code { 
 
    background: rgba(0,0,0,.2) 
 
} 
 

 
pre { 
 
    white-space: pre-wrap; 
 
    background: rgba(0,0,0,.2) 
 
}

The <code>&lt;code&gt;</code> tag. 
 

 
<pre> 
 
Here's a &lt;pre&gt; tag. some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text 
 
</pre>