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