- 10
- 8月
我开这个Blog主要想分享一下技术上的心得,顺便总结一下自己的收获,因此少不了会例举一些代码和配置文件。WordPress本身好像没有为这准备什么。之前我也是把代码直接放在正文中的。最近觉得十在不爽了,干脆自己为Blog添加代码显示框。
考虑了一下Html中的标签,准定改写pre标签,让它来实现代码显示。
在主题的style.css中定义:
pre { text-indent:0; border:1px solid black; padding:5px 15px 5px 15px; margin:5px 10px 5px 10px; word-wrap:break-word; white-space: pre-wrap; white-space: -moz-pre-wrap; background-color:#E6E6E6; }
实现了将段首缩进置零(我正文中有自动段首缩进,所以得取消掉)、增加边框背景等样式,让它看起来像别的网站上的代码显示块。
其中最重要的是以下三行:
word-wrap:break-word; white-space: pre-wrap; white-space: -moz-pre-wrap;
成功实现了在所有浏览器中文本在元素边界强制换行。这样连续的英文文本就不会把元素撑大了(相信做过Web开发的人都知道这个经典的问题)。
以后插入代码只要把它们放到pre标签中就可以了。