网站动态

修改wp-syntax代码自动换行

页面
字体
小树 · 2月18日 · 2014年 ·
 
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大电影,它们都在某方便帮助了我理解编程中的某些
 

转载必须注明来源: 小树技术博客 » 修改wp-syntax代码自动换行

2 条回应
  1. 小树2014-2-18 · 16:24

    本意是要修改 wp-syntax 的,由于修改失败了,但是又找到更好的代码高亮插件syntax-highlighter-and-code-prettifier,因此此贴就算做个纪念吧。