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. 数组的方法之(Array.prototype.filter() 方法)

    filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素.     注意: filter() 不会对空数组进行检测.     注意: filter() 不会改变原始 ...

  2. typescript+react+antd基础环境搭建

    typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接 这里module moduleResolution的配置都会影 ...

  3. vue+axios 对restful 请求封装

    礼拜天来公司整理项目,项目是最近开始重构的,里面的各种http请求接口是restful结构的(为了提升项目的比格),整理一下笔记 [restful介绍][1]博主讲的很详细 技术栈: vue + vu ...

  4. VisualTreeHelper使用——使用BFS实现高效率的视觉对象搜索

    BFS,即广度优先搜索,是一种典型的图论算法.BFS算法与DFS(深度优先搜索)算法相对应,都是寻找图论中寻路的常用算法,两者的实现各有优点. 其中DFS算法常用递归实现,也就是常见的一条路找到黑再找 ...

  5. list reverse

    You can make use of the reversed function for this as: >>> array=[0,10,20,40] >>> ...

  6. settings.gradle与build.gradle有什么区别

    参考回答 settings.gradle文件是gradle项目的总体配置文件,一般会把子项目中通用的一些配置放在这个文件中,有点雷士与maven的parent pom 文件. build.gradle ...

  7. Spring_总结

    spring配置Bean 配置形式 基于XML文件的方式 属性注入 构造注入 泛型依赖注入 基于注解的方式 配置方式 全类名(反射) 通过工厂方法 FactoryBean 字面值 <![CDAT ...

  8. Directx11教程(50) 输出depth/stencil buffer的内容

    原文:Directx11教程(50) 输出depth/stencil buffer的内容      有时候,我们需要查看depth/stencil buffer的内容,比如上一章中,我们要查看sten ...

  9. java 使用poi导出Excel,设置单元格保护不可编辑

    //sheet表加密:等效excel的审阅菜单下的保护工作表 sheet.protectSheet(new String("333"));//333是密码 更多设置请参考:http ...

  10. pl/sql基础知识—触发器

    n  触发器简单介绍 触发器是指隐含执行的存储过程,它不是由程序员或者是DBA来显式调用,而是因为某个操作引发执行的.当定义触发器时,必须要指定触法的事件和触发的操作,常用的触发事件包括insert, ...