尽管会有很多的代码插件供你选择，但是我却想和大家分享一下用CSS背景来实现<pre>和<code>标签

Firefox浏览器中的问题

当你想往标签里加点padding的话,在FireFox中会有一个跨浏览器的bug。它会干扰标签中的空格显示距离.看下面这个例子：

解决方案

我们可以灵活的把<code>标签嵌套进<pre>标签中来解决这个问题.
Html:

pre {
    font-size: 12px;
    padding: 0;
    margin: 0;
    background: #f0f0f0;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    line-height: 20px; /*–Height of each line of code–*/
    background: url(pre_code_bg.gif) repeat-y left top; /*–Background of linedpaper–*/
    width: 600px;
    overflow: auto; /*–If the Code exceeds the width, a scrolling is available–*/
    overflow-Y: hidden; /*–Hides vertical scroll created by IE–*/
}
pre code {
    margin: 0 0 0 40px; /*–Left Margin–*/
    padding: 18px 0;
    display: block;
}

翻译自：http://www.sohtanaka.com
原文地址：