PIZn

      在我四月份设计的 WordPress 主题 Violet 1.0 版本的时候，由于是第一次接触，所以很多功能都没能加上去。经过一番策划和设计，这段时间已经在开始着手升级我的 Violet 主题，算是 Violet 2.0 版本吧。

      当我们发表的一些技术性文章的时候，很有可能就会附加一些代码加以说明一些例子。而我，在之前书写部分 CSS 文章的时候，也用到过。但就是没有对这些代码进行格式化，不方便用户的阅读。

      因为我不想使用 WordPress 的代码高亮插件，所以就直接自己设计代码样式了。

      设计代码样式主要考虑一下 2 个问题：

      1.代码的行数如何显示？HTML 的列表分为有序列表（ol）和无序列表（ul），为了解决代码序列的显示问题，我使用了有序列表（ol）。

      2.使用什么样的字体才合适呢？在之前写过的一文《”.字体设计一二三事、》中提到，一般使用等宽字体比较合适代码，看起来会比较舒适。于是我使用了 Monaco, “Courier New”, Tahoma等字体。

      实现的 CSS 主要有（显示效果如下可见）：

1. ol{
2. padding:0;
3. margin:0;}
4. .code{
5. padding:1px 3px 1px 35px;
6. list-style-type:decimal-leading-zero;
7. font-size:12px;
8. font-family:Courier;}
9. .code code{
10. font-family:Monaco, "Courier New", Tahoma;
11. color:#800888;}

      最后总结：

      有了 CSS 之后，只要在我们编辑文章的时候，花费点儿时间在代码上面就可以了。在需要写的代码外面加上一个有序列表（ol），并赋予其属性类 class=“code”，然后在 li 属性内嵌套 code 标签便可。至于对样式表的美观、代码的层次化等 CSS 样式设计，就需要自己稍斟酌了。