防止SyntaxHighlighter.js的代碼高亮?xí)r閃一下的解決方法

SyntaxHighlighter.js是一個(gè)代碼高亮的JS插件，使用也很簡單，但是由于是瀏覽器段執(zhí)行JS代碼來著色，會(huì)出現(xiàn)視覺上閃一下的效果。比如你的20行代碼網(wǎng)頁打開顯示高度為100px，但是SyntaxHighlighter高亮后該區(qū)域高度變?yōu)?20px 加上顏色的變化，這樣的體驗(yàn)特別不好。

解決原理：把pre標(biāo)簽的樣式定義為 高亮后的樣式即可

解決方法：在shCoreDefault.css文件加上如下樣式

pre {
   line-height:22px !important;
   background-color:#f5f5f5!important;
   border:1px solid #ccc!important;
   border-radius:4px!important;
   width:98% !important;
   margin:.3em 0 .3em 0!important;
   padding:0 0 0 1em!important;
   font-size:13px !important;
   font-family:Monaco,Menlo,Consolas,"Courier New",monospace;
}

即可這樣就不會(huì)出現(xiàn)大面積的閃爍了，然后按F5強(qiáng)制刷新瀏覽器緩存，查看效果，如果還是有細(xì)微差距，可以自己微調(diào)SyntaxHighlighter 的 CSS樣式。