SyntaxHighlighter.js是一个代码高亮的JS插件,使用也很简单,但是由于是浏览器段执行JS代码来着色,会出现视觉上闪一下的效果。比如你的20行代码网页打开显示高度为100px,但是SyntaxHighlighter高亮后该区域高度变为120px 加上颜色的变化,这样的体验特别不好。

解决原理:把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;
}

  即可这样就不会出现大面积的闪烁了,然后按F5强制刷新浏览器缓存,查看效果,如果还是有细微差距,可以自己微调CSS样式。

原文引用:http://www.itxst.com/detail/d8459385.html

防止SyntaxHighlighter.js的闪烁闪一下的方法的更多相关文章

  1. 利用JS实现闪烁字体

    以下为在JSP文件中,利用JS实现闪烁字体的代码: HTML代码: <div id="blink">一段会闪烁的字</div> JavaScript代码: ...

  2. js jquery 页面加载初始化方法

    js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...

  3. JS清除IE浏览器缓存的方法

    js中自动清除ie缓存方法 — 常用 对于动态文件,比如 index.asp?id=... 或者 index.aspx?id=... 相信有经验的程序员都知道怎样禁止浏览器缓存数据了.但是对于静态文件 ...

  4. JS按回车键实现登录的方法

    本文实例讲述了JS按回车键实现登录的方法,该功能有着非常广泛的实用价值.分享给大家供大家参考之用.具体方法如下: 方法一: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 < ...

  5. 编写高质量JS代码的68个有效方法(八)

    [20141227]编写高质量JS代码的68个有效方法(八) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

  6. 编写高质量JS代码的68个有效方法(七)

    [20141220]编写高质量JS代码的68个有效方法(七) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

  7. 编写高质量JS代码的68个有效方法(六)

    [20141213]编写高质量JS代码的68个有效方法(六) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

  8. 编写高质量JS代码的68个有效方法(四)

    [20141129]编写高质量JS代码的68个有效方法(四) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

  9. 编写高质量JS代码的68个有效方法(三)

    [20141030]编写高质量JS代码的68个有效方法(三) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

随机推荐

  1. Faster RCNN算法训练代码解析(2)

    接着上篇的博客,我们获取imdb和roidb的数据后,就可以搭建网络进行训练了. 我们回到trian_rpn()函数里面,此时运行完了roidb, imdb = get_roidb(imdb_name ...

  2. webpack学习之—— Manifest

    Runtime runtime,以及伴随的 manifest 数据,主要是指:在浏览器运行时,webpack 用来连接模块化的应用程序的所有代码.runtime 包含:在模块交互时,连接模块所需的加载 ...

  3. linux 下批量在多文件中替换字符串

    sed -i "s/原字符串/新字符串/g" `grep 原字符串 -rl 所在目录` 注意:`` 符号在shell里面正式的名称叫做backquote , 一般叫做命令替换其作用 ...

  4. Java加密AES算法及spring中应用

    开门见山直接贴上代码 .AESUtil加密解密工具类 import java.security.Key; import java.security.SecureRandom; import java. ...

  5. 网页性能测试之WebPageTest

    想知道您的网站,性能怎么样? 很自然,首先得找一个广被认可的测试工具.我们推荐WebPageTest: WebPageTest 它是google 开源项目”make the web faster “的 ...

  6. Python比较有用的小语法

    额,这是在Codeforces做题的时候从Virtual judge那儿学的 #ord()内置函数,将单个字符变为int#chr()内置函数,将int变为单个字符# for : else ( 或 wh ...

  7. linux C 编译时手动链接遇到的问题(未解决)

    写多线程的时候,编译的时候遇到了问题,开始的时候是这样的: 编译器不认识pthread_create和pthread_join这两个函数. 搜了一下原因是没有链接相应的库,下面是我看到一个博友写的: ...

  8. SAS-一些有用的语句

    SAS-一些有用的语句 今天本想继续介绍 summary过程的,但是发现别人整理的比我更好,于是周末再更,好好整理一下描述性统计分析及评分卡建模,今天给大家介绍一些sas有用的语句吧. 1.如果在同一 ...

  9. mac os 使用记录

    折腾过一台黑苹果,配置很菜,奔腾G3260和B150M-D2V,具体EFI和配置详见repo Hackintosh 首先要解决的就是写代码问题,mac进行acm(C/C++)编程 VS code天下第 ...

  10. JS文字球状放大效果

    在线演示 本地下载