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/