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. js中的如何定位固定层的位置

    需要获取一些HTML的对象的坐标来更灵活的设置目标层的坐标,这里可以通过用到document.body.scrollTop等属性,但是这些属性在xhtml的标准网页中或更简单的说就是带<!DOC ...

  2. 杨柳絮-Info:菏泽多措并举治理杨柳絮 5年内实现“有絮不成灾”

    ylbtech-杨柳絮-Info:菏泽多措并举治理杨柳絮 5年内实现“有絮不成灾” 1.返回顶部 1. 菏泽多措并举治理杨柳絮 5年内实现“有絮不成灾” 2019年04月09日 11:44  来源:大 ...

  3. Redhad的开源Paas平台:OpenShift

    参考redHat的官方文章翻译而来:https://openshift.redhat.com/community/wiki/architecture-overview OpenShift Origin ...

  4. 项目ITP(七) javaWeb 整合 Quartz 实现动态调度 而且 持久化

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u010378410/article/details/36255511 项目ITP(七) javaWe ...

  5. GBRT(GBDT)(MART)(Tree Net)(Tree link)

    源于博客 GBRT(梯度提升回归树)有好多名字,标题全是它的别名. 它是一种迭代的回归树算法,由多棵回归树组成,所有树的结论累加起来得到最终结果.在被提出之初与SVM一起被认为是泛化能力较强的算法. ...

  6. 使用 Windows 10 WSL 搭建 ESP8266 编译环境并使用 VSCODE 编程(一)(2019-08-23)

    目录 使用 Windows 10 WSL 搭建 ESP8266 编译环境并使用 VSCODE 编程 安装前准备 安装 ESP8266 工具链 下载 ESP8266 SDK 编译 花絮 使用 Windo ...

  7. 【C++】反向迭代器(rbegin,rend)(转载)

    转自:http://blog.csdn.net/kjing/article/details/6936325 rbegin和rend,很有用! C++ primer (中文版第四版)第273页 9.3. ...

  8. python-selenium自动化测试(火狐、谷歌、360浏览器启动)

    一.打开谷歌浏览器 import selenium from selenium import webdriver browser = webdriver.Chrome(executable_path ...

  9. @codeforces - 1221G@ Graph And Numbers

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个 n 点 m 边的无向图. 现在要求给每个点写上 0 或 ...

  10. Windows server 2012 开启消息队列功能