用 pre/code 武装代码

我以前也折腾代码，但毕竟是门外汉，对于写博客也没有那么多要求，所以都是用 <blockquote> 来装代码。后来学了点 html，知道它是用来引用的，又“偷看”了别人装代码的代码，用的是 <pre> 和 <code>。再后来我找到一篇文章Code Boxes with <pre> and CSS，体会到装代码的精髓：短用 <code> 长用 <pre>。于是随着搬博客要整理博文，干脆把之前的代码都“规范化”。博文已经整理了一半，可以看到教程贴里的大部分代码现在都非常“赏心悦目”，可读性也得到了保障，复制起来腰不酸了，腿不疼了，粘贴也有劲儿了！

以我多时“借鉴”他人 CSS 的经验，现归纳总结为如下武装代码：

pre {
background: #f8f8f8;
font: 14px "Courier 10 Pitch", Courier, monospace;
line-height: 1.5;
overflow: auto;
padding: 10px 15px;
margin: 15px 0;
}
code {
font-family: Monaco,Consolas,"Droid Sans Mono",Courier,monospace;
font-size: 14px;
background: #f8f8f8;
padding: 4px;
}
pre code {
padding: 0;
}

这个 pre code 真的是我的至宝。如果没有这个 pre code 的 padding: 0; 的设置，那么在长代码（也就是使用 <pre><code> ）的时候，第一行会有缩进（code 底下的 padding: 4px;）。

这次搬博客对我来说非常重要，不仅从修改主题升级到制作主题，甚至准备在日后写一个通用的简单模板提供给其他喜欢制作主题的新手 DIY，就像 WP 的 Sandbox。而且之前薄弱的 html 和 css 知识也算加固了不少，虽然 css 还没有学完，但理解真的加深不少。