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