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

问题描述

我的网站将会有一些内联代码（当使用 foo（）函数...）和一些块代码片段时。这些往往是XML，并有很长的行，我更喜欢浏览器换行（即，我不想使用< pre> ）。我还想在块代码片段中添加CSS格式。

看来我不能使用< code> ，因为如果我在其上放置CSS块属性（使用 display：block; ），它将打破内联片段。

我很好奇人们在做什么。对于块使用< code> ，对于内联使用< samp> 使用< code>< blockquote> 或类似的东西？我想保留实际的HTML尽可能简单，避免类，因为其他用户将维护它。

解决方案

我完全错过了一些东西：非包装可以使用CSS控制< pre> 的行为。所以这给出了我正在寻找的确切结果：

code {background： hsl（220,80％，90％）; } pre {white-space：pre-wrap;背景：hsl（30,80％，90％）;} 以下是演示< code>& lt; code& gt;< / code>的示例。 < pre>以下是使用& lt; pre& gt;格式化的非常长的预格式化格式。标签。注意它是如何包装的？ < / pre>

My site is going to have some inline code ("when using the foo() function...") and some block snippets. These tend to be XML, and have very long lines which I prefer the browser to wrap (i.e., I don't want to use <pre>). I'd also like to put CSS formatting on the block snippets.

It seems that I can't use <code> for both, because if I put CSS block attributes on it (with display: block;), it will break the inline snippets.

I'm curious what people do. Use <code> for blocks, and <samp> for inline? Use <code><blockquote> or something similar?

I'd like to keep the actual HTML as simple as possible, avoiding classes, as other users will be maintaining it.

解决方案

Something I completely missed: the non-wrapping behaviour of <pre> can be controlled with CSS. So this gives the exact result I was looking for:

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/

这篇关于<代码> vs< pre> vs< samp>用于内联和块代码片段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！