防止SyntaxHighlighter.js的代码高亮时闪一下的解决方法

所属分类: 网络编程 / 网页播放器 阅读数: 328
收藏 0 赞 0 分享

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强制刷新浏览器缓存,查看效果,如果还是有细微差距,可以自己微调SyntaxHighlighter 的 CSS样式。

更多精彩内容其他人还在看

歌词编辑器和选择歌曲可播放的网页

歌词编辑器和选择歌曲可播放的网页
收藏 0 赞 0 分享

非常全的javascript控制MediaPlayer的属性集合

非常全的javascript控制MediaPlayer的属性集合
收藏 0 赞 0 分享

1ting的歌词同步,所用到的代码

1ting的歌词同步,所用到的代码
收藏 0 赞 0 分享

关于网页媒体播放器兼容性的问题(附原码) 下载

关于网页媒体播放器兼容性的问题(附原码) 下载
收藏 0 赞 0 分享

asp.net 页面中添加普通视频的几种方式

公司需要在一个测试网页中插入视频,今天正好有时间整理了三个普通的插入视频的方式。
收藏 0 赞 0 分享

[翻译] JW Media Player 中文文档第1/4页

[翻译] JW Media Player 中文文档
收藏 0 赞 0 分享

在线FLV播放器实现方法

者主页: http://www.jeroenwijering.com/?item=Flash_Video_Player http://www.cgfans.net/bbs/Medias/2007/10/flash_flv_player.zip这个是2.5版本 使用方法:如果你
收藏 0 赞 0 分享

flv播放器 在网页中播放flv

以前找了很久,现在的项目中用到了。需要的自己下载。 现在我们可以方便的在网页中播放flv文件了
收藏 0 赞 0 分享

宝丽通3.90播放器调用代码

宝利通网络媒体播放器是一款支持HTTP协议的流媒体播放器, 无缓冲,拖放速度快是他最大的优点.2年前曾经做的一个Project用的就是它.
收藏 0 赞 0 分享

电影系统调用“宝丽通”加速播放器,任意拖动不会卡

电影系统调用“宝丽通”加速播放器,任意拖动不会卡,绝对好东西!不信你试试!
收藏 0 赞 0 分享
查看更多