SyntaxHighlighter行号显示错误问题解决方案

SyntaxHighlighter是根据代码中的换行符分配行号的。可是，若是一行代码或者注释比较长，在页面显示时须要分红多行显示，会出现行号对不上的问题，像这样：

经过设置CSS强制不换行，能够保证行号显示正常，但会出现滚动条，像这样：

使用开发者工具查看SyntaxHighlighter所渲染的元素能够看到，每一个行号和每行代码都是一个div，而因为是行号和代码是分别放在两个td中进行的高度计算，致使了在其中一部分出现高度变化时，两部分的高度不一样。

这时候考虑在元素渲染完成后，动态改变行号的默认高度：

var guttelines=$('.gutter .line’);
var codelines=$('.code .line’);
for(i=0;i<$(guttelines).length;i++){
    $(guttelines).eq(i).css('height',$(codelines).eq(i).css('height'))
}

查看元素及渲染效果，元素虽然被设置了高度，但并未按所设置的高度进行显示，行号显示依然有问题，会这样：

 

使用开发者工具查看行号元素，能够看到，其高度并未生效

 

查看style渲染过程，能够看到，高度是被SyntaxHighlighter默认css中经过important覆盖了

 

删除这个important高度设置，从新刷新页面，问题解决。

 

注：SyntaxHighlighter 3.0.83 使用的是 XRegExp 1.5.0 ，在修改时须要引用该js

完整代码请参考： https://github.com/buaawp/syntaxhighlighter/

 

最终效果请参考：http://leettest.com