欢迎来到科站长!

网页播放器

当前位置: 主页 > 网络编程 > 网页播放器

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

时间:2024-09-18 14:48:16|栏目:网页播放器|点击:

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样式。

上一篇:暂无

栏    目:网页播放器

下一篇:网页在线视频播放代码大全

本文标题:防止SyntaxHighlighter.js的代码高亮时闪一下的解决方法

本文地址:https://fushidao.cc/wangluobiancheng/706.html

广告投放 | 联系我们 | 版权申明

申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:1205677645 | 邮箱:1205677645@qq.com

Copyright © 2018-2024 科站长 版权所有冀ICP备14023439号