Phxsuns

因为用的百度编辑器自带的缘故，代码高亮插件选用了SyntaxHighlighter。

但是这货有个蛋疼的问题就是长一些的代码不能自己换行，会出滚动条。

于是网上找了个“解决方法”：把默认的不换行样式去掉，或覆盖成默认：

.syntaxhighlighter .line {
  /*white-space: pre !important; 注释掉，或者外部覆盖掉 */
}

烦人的横向滚动条没有了，但是，看起来还是怪怪的。就像这样，这是从贼寇同学站上截的图，求不打：

竟然和行号没对齐！

显然还需要额外再用JS处理一下。正巧，百度编辑器里已经有了解决代码，不要问我为啥不全用jQuery来操作DOM：

$('.syntaxhighlighter').each(function(index,me){
    var tds = me.getElementsByTagName('td');
    for(var i=0,li,ri;li=tds[0].childNodes[i];i++){
        ri = tds[1].firstChild.childNodes[i];
        ri.style.height = li.style.height = ri.offsetHeight + 'px';
    }
});

需要特别注意的是，需要在SyntaxHighlighter渲染过后执行这段代码。于是，我们需要给渲染方法加一个回调参数。在shCore.js中找到all方法，添加一个callback的参数：

all: function(params, callback)
{
    attachEvent(
       window,
       'load',
       function() { sh.highlight(params); callback(); }
    );
}

网上也有不改插件源码的方法，就用setTimeout去监听是否完成全部渲染，也是可以的。不再赘述。

页面调用的时候这样就好：

jQuery(function(){
	if(!window.SyntaxHighlighter) return;
	var comepete = function(){
		$('.syntaxhighlighter').each(function(index,me){
			var tds = me.getElementsByTagName('td');
			for(var i=0,li,ri;li=tds[0].childNodes[i];i++){
				ri = tds[1].firstChild.childNodes[i];
				ri.style.height = li.style.height = ri.offsetHeight + 'px';
			}
		});
	}
	SyntaxHighlighter.all({},comepete);
});

然后大家看到的代码高亮就正常了。