CSS 代码样式 - 空行上缺少背景颜色

发布于 2024-08-13 21:26:19 字数 1054 浏览 3 评论 0原文

我希望这很简单。我不是 CSS 人。

我试图让一些代码在博客上看起来更好一些，并且我有以下 CSS 样式。

code {
        display: block;
        white-space:normal;
        background-color: #eeeeee;
        font: 1em, 'Courier New', Courier, Fixed;
        padding: 7px;
        margin: 7px 7px 7px 7px;
    }

这对我来说工作得很好，除了我的 标签中包含的代码中有换行符的地方，背景颜色是白色而不是浅灰色。

我可以进行 CSS 调整来强制整个 块的背景色为灰色吗？

谢谢。

评论：如果我在空行上放置一个空格，我就会得到我想要的东西 - 该行上有灰色背景。

Comment2：我的标签内只有纯文本。理想情况下，我不想用标签来标记我的代码。只需剪切并粘贴到 标签内即可使其看起来不错。

最后评论：按照下面墨卡托的建议阅读此后，我终于就这样去了。我对

 标签进行了子类化，并得到了我需要的东西。一个漂亮的阴影框来抵消我的示例代码块。

 pre.code {
    color: black;
    border: solid 1px #eeeeee;
font-size: 1.1 em; 
margin: 7px; 
padding: 7px; 
background: #eeeeee
 }

原文

I'm hoping this is simple. I'm not a CSS guy.

I'm trying to make some code look a little better on a blog and I have the following <code> CSS style.

code {
        display: block;
        white-space:normal;
        background-color: #eeeeee;
        font: 1em, 'Courier New', Courier, Fixed;
        padding: 7px;
        margin: 7px 7px 7px 7px;
    }

This is working fine for me, except where there are line breaks in the code contained in my <code> tag, the background color is white not light gray.

Is there a CSS tweak I can make to force my entire <code> block have a background color of gray?

Thanks.

Comment: If I put a space on the empty line, I get what I want - a gray background on that line.

Comment2: I have only plain text inside of my <code> </code> tags. Ideally I don't want to mark up my code w/ tags. Just cut and paste inside of the <code> tags and have it look decent.

Final Comment: After reading this as suggested by mercator below, I finally went with this. I subclassed the <pre> tag and got want I needed. A nicely shaded boxes to offset my example code blocks.

 pre.code {
    color: black;
    border: solid 1px #eeeeee;
font-size: 1.1 em; 
margin: 7px; 
padding: 7px; 
background: #eeeeee
 }

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

瑕疵 2024-08-20 21:26:19

它似乎对我来说工作得很好，但我不知道你的 标签的内容是什么。

无论如何，您的 CSS 中都有一些奇怪的地方：

我可能不会使用 display: block，而是将标签包装在
或 < ;pre> 代替。将其更改为这样的块仍然不允许您在其中嵌套块级标签，并且它仍然需要位于块级标签本身内。 CSS 不会改变 HTML 语法和语义。您的代码标签中是否有任何块级标签？
为什么要设置white-space：normal？这对于代码块来说有点不寻常。您究竟如何格式化代码？您是否在其中添加
或标签？为什么不使用white-space: pre，或者white-space: pre-wrap？
您的 font 声明已损坏。 1em 和字体名称之间不应有逗号。我认为，浏览器现在会简单地解析它，就好像 1em 是字体系列的名称一样，然后依靠 Courier New，因为 1em > 不存在。
我认为您的意思是说 monospace 而不是 Fixed。或者Fixed是字体的实际名称？无论如何，您最好添加通用的 monospace 。
更挑剔的是：您也可以将这 4 个边距折叠为一个值。

我不确定这些是否真的是造成您问题的原因。前两个是最有可能的候选人。我所做的快速测试没有发生任何奇怪的事情，但是您的一些其他 CSS 可能会与其中一些点结合起来产生问题。

啊，等一下...我现在明白了，您正在谈论让“某些代码在博客上看起来更好一点”。博客软件会自动在由空行分隔的文本块周围添加段落标签。那些负责白色。

我想这也是您添加 white-space: normal 的原因。博客软件已经自动添加换行符和所有内容（使用

和标签），因此使用 pre 添加一大堆额外的空间。

尝试像 StackOverflow 一样使用

标签组合。使用标签可能（希望）防止博客软件弄乱您的代码。

对于 WordPress，请查看他们的文章“在帖子中编写代码”。

It appears to work fine for me, but then I don't know what the contents of your <code> tags are.

There's a few oddities in your CSS in any case:

I probably wouldn't use display: block, but wrap the tags in a  or <pre> instead. Changing it to a block like that still won't allow you to nest block-level tags inside it, and it would still need to be inside a block-level tag itself. CSS doesn't change the HTML syntax and semantics. Do you have any block-level tags within your code tags?
Why did you set white-space: normal? That's a little unusual for a code block. How exactly are you formatting your code? Are you adding  or   tags in there? Why don't you use white-space: pre, or perhaps white-space: pre-wrap?
Your font declaration is broken. There shouldn't be a comma between the 1em and the font names. Browsers would now simply parse that as if 1em is the name of a font family, I think, and then fall back on Courier New, since 1em doesn't exist.
I think you meant to say monospace instead of Fixed. Or is Fixed the actual name of a font face? You'd better add the generic monospace anyway.
More of a nitpick: you can collapse those 4 margins down to one value too.

I'm not sure if any of these are really the cause of your problems. The first two are the most likely candidates. Nothing strange happened on the quick tests I did, but some of your other CSS might be creating the problems in combination with some of these points.

Ah, wait a minute... I see now that you're talking about making "some code look a little better on a blog". The blog software is automatically adding paragraph tags around blocks of text separated by blank lines. Those are responsible for the white.

I suppose that's also why you added white-space: normal. The blog software is already adding line breaks and everything automatically (with  and   tags), so using pre added a whole bunch of extra space.

Try using the <pre><code> tags combination like StackOverflow does. Using the <pre> tag will probably (hopefully) prevent the blog software from messing with your code.

For WordPress, have a look at their article "Writing Code in Your Posts."

回复收藏 0 原文

时光匆匆的小流年 2024-08-20 21:26:19

尝试设置明确的宽度。不知道为什么这会起作用。我有时会在测试时添加边框，看看我的盒子在哪里以及它是什么样子。我知道你可以使用像 firebug 这样的 Web 调试器来做到这一点，有时它更简单，甚至可能会有副作用。

添加：

width: 100%;
border: 1px solid #eee;

看看是否有帮助，也许将边框颜色更改为 #000 以查看边界在哪里。

Try setting an explicit width. Not sure why that would work. I sometimes add a border while testing to see where my box is and what it looks like. I know you can do that with web debuggers like firebug, sometimes it's simpler and might even have side effects.

add: