防止SyntaxHighlighter.js的代碼高亮?xí)r閃一下的解決方法
更新時(shí)間：2020年03月13日 22:28:46 作者：logspool
這篇文章主要介紹了防止SyntaxHighlighter.js的代碼高亮?xí)r閃一下的解決方法,需要的朋友可以參考下
SyntaxHighlighter.js是一個(gè)代碼高亮的JS插件，使用也很簡(jiǎn)單，但是由于是瀏覽器段執(zhí)行JS代碼來(lái)著色，會(huì)出現(xiàn)視覺(jué)上閃一下的效果。比如你的20行代碼網(wǎng)頁(yè)打開(kāi)顯示高度為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樣式。
您可能感興趣的文章:
- SyntaxHighlighter 去掉右側(cè)滾動(dòng)條的方法
- SyntaxHighlighter自動(dòng)識(shí)別并加載腳本語(yǔ)言
- z-blog SyntaxHighlighter 長(zhǎng)代碼無(wú)法換行解決辦法(基于jquery)
- SyntaxHighlighter 3.0.83使用筆記
- ckeditor syntaxhighlighter代碼高亮插件配置分享
- CKEditor中加入syntaxhighlighter代碼高亮插件
- z-blog SyntaxHighlighter 長(zhǎng)代碼無(wú)法換行解決辦法(jquery)
- 解決SyntaxHighlighter 代碼高亮不換行問(wèn)題的解決方法
- FCKeditor + SyntaxHighlighter 讓代碼高亮著色插件
- 代碼著色之SyntaxHighlighter項(xiàng)目(最流行的代碼高亮)
- syntaxhighlighter 去掉右上角問(wèn)號(hào)圖標(biāo)的三種方法
- 為SyntaxHighlighter添加新語(yǔ)言的方法
- SyntaxHighlighter配合CKEditor插件輕松打造代碼語(yǔ)法著色
- SyntaxHighlighter語(yǔ)法高亮插件使用說(shuō)明
- ckeditor syntaxhighlighter代碼高亮插件，完美修復(fù)
- coolcode轉(zhuǎn)SyntaxHighlighter與Mysql正則表達(dá)式實(shí)現(xiàn)分析
- FCKeditor 和 SyntaxHighlighter 代碼高亮插件的整合
- SyntaxHighlighter 語(yǔ)法高亮插件的使用教程
- 使用SyntaxHighlighter實(shí)現(xiàn)HTML高亮顯示代碼的方法
- FCKEditor SyntaxHighlighter整合實(shí)現(xiàn)代碼高亮顯示
- SyntaxHighlighter代碼加色使用方法
- syntaxhighlighter 使用方法
- 關(guān)于實(shí)現(xiàn)代碼語(yǔ)法標(biāo)亮 dp.SyntaxHighlighter
- SyntaxHighlighter?Autoloader(自動(dòng)加載)最優(yōu)方式
相關(guān)文章
利用JAVASCRIPT控制MEDIA PLAYER的功能實(shí)現(xiàn)
利用JAVASCRIPT控制MEDIA PLAYER的功能實(shí)現(xiàn)...2007-02-02
在線播放器代碼大全...2006-07-07
內(nèi)嵌式RealPlayer播放器的參數(shù)含義
內(nèi)嵌式RealPlayer播放器的參數(shù)含義...2006-11-11
符合web標(biāo)準(zhǔn)的媒體播放器代碼...2006-07-07
這里只舉WMV（MediaPlayer9.0及以后）的網(wǎng)頁(yè)內(nèi)嵌播放器代碼。(默認(rèn)0為否,-1或1為是)2008-11-11
[紅色]通用網(wǎng)頁(yè)播放器...2006-07-07
在網(wǎng)頁(yè)中(所有網(wǎng)頁(yè)都由html組成，所以說(shuō)下面的代碼，可以用于任何網(wǎng)頁(yè)，部分限制了html的網(wǎng)頁(yè)除外.2010-04-04
Window Media Player 播放器...2006-11-11
網(wǎng)上比較常用的嵌入網(wǎng)頁(yè)中的播放器代碼收藏
我們?cè)诰W(wǎng)頁(yè)上看到的播放器無(wú)外乎WMP/RealOne/Macromedia Flash Player,其他的無(wú)非是面板不同，或者添加了其他控件，對(duì)于計(jì)算機(jī)上安裝的一些播放器也都是編碼和解碼器的整合，其最核心的編碼和解碼技術(shù)是相同的。2009-12-12
多首歌曲連續(xù)播放之a(chǎn)sx播放列表文件...2006-12-12