修改wp-syntax代码自动换行

qsuron 发布于 2014-02-18 网站动态 27 次阅读 1 评论 347 字 预计阅读时间: 2 分钟

 
wp-syntax代码插件是个非常好用的代码高亮插件,自己博客用的就是这个。
wp-syntax在代码过长的时候默认是出现滚动条，觉得这样挺不好看的，想把它设置成过长时自动换行显示。
 
这里记录一下自己使用的方法：编辑 wp-syntax/css/wp-syntax.css1、在.wp_syntax pre样式块中增加以下代码，兼容各浏览器
代码位于wp-content/plugins/wp-syntax/css/wp-syntax.css

white-space: pre-wrap;       /* css-3 */
white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
2、修改.wp_syntax
代码位于wp-content/plugins/wp-syntax/css/wp-syntax.css

.wp_syntax {
	color           : #100;
	background-color: #f9f9f9;
	border          : 1px solid silver;
	margin          : 0 0 1.5em 0;
	width:95%;
	overflow        : hidden;
}
大功告成。

测试：

//程序员必看的十大电影         不同的行业领域中很多时候都分享着共同的思想和理念。比如，大量的计算机编程中涉及到的概念都被运用到了电影里。有些概念出现在电影里后变得如此之 酷，甚至反过来能帮助我们程序员更好的理解这些概念。
public static void main(String[] agrs){
    System.out.println("ew");
}
//下面就是我最喜欢的10大电影，它们都在某方便帮助了我理解编程中的某些