SyntaxHighlighter.js是一個代碼高亮的JS插件，使用也很簡單，但是由于是瀏覽器段執(zhí)行JS代碼來著色，會出現(xiàn)視覺上閃一下的效果。比如你的20行代碼網(wǎng)頁打開顯示高度為100px，但是SyntaxHighlighter高亮后該區(qū)域高度變?yōu)?20px 加上顏色的變化，這樣的體驗特別不好。
解決原理：把pre標簽的樣式定義為 高亮后的樣式即可
解決方法：在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;
}
即可這樣就不會出現(xiàn)大面積的閃爍了，然后按F5強制刷新瀏覽器緩存，查看效果，如果還是有細微差距，可以自己微調(diào)SyntaxHighlighter 的 CSS樣式。
您可能感興趣的文章:- SyntaxHighlighter自動識別并加載腳本語言
- SyntaxHighlighter 3.0.83使用筆記
- ckeditor syntaxhighlighter代碼高亮插件配置分享
- CKEditor中加入syntaxhighlighter代碼高亮插件
- 解決SyntaxHighlighter 代碼高亮不換行問題的解決方法
- syntaxhighlighter 去掉右上角問號圖標的三種方法
- 為SyntaxHighlighter添加新語言的方法
- ckeditor syntaxhighlighter代碼高亮插件，完美修復
- SyntaxHighlighter 語法高亮插件的使用教程
- 使用SyntaxHighlighter實現(xiàn)HTML高亮顯示代碼的方法
