<Code>标签CSS与维基百科一样

Question

我正在编写HTML和CSS中的一些页面,其中包含代码示例.我希望像WikiPedia上的灰色框一样(我知道这是用Media Wiki完成的).示例页面是:

http://en.wikipedia.org/wiki/Dd_(Unix)#Uses

你会看到代码有一个带有虚线的灰色框.在使用'dd'的页面上方,文本也是等宽的,但没有显示框.

你能告诉我如何在标签周围使用CSS获得相同的样式吗？

谢谢

彼得琼斯

Answer 1

HTML

<code>dd if=/dev/sda of=MBR.img bs=512 count=1</code>?

CSS

code{background:#F8F8FF; border:black dashed 1px; padding:6px}?

DEMO

Answer 2

只需使用任何检查工具(例如,Firebug)来查看页面上使用了什么CSS.至于你的例子,这是以下内容:

{
    background-color: #F9F9F9;
    border: 1px dashed #2F6FAB;
    color: black;
    line-height: 1.1em;
    padding: 1em;
}

PS:如果你想要突出显示代码,请看一下highlight.js.