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