防止SyntaxHighlighter.js的闪烁闪一下的方法
2024-09-06 15:57:53
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
最新文章
- android Broadcast广播消息代码实现
- ASP.NET的编译原理
- Android消息推送——JPush极光推送
- window下使用vnc远程登录阿里云ECS/ubuntu图形界面
- Linux-LVS+keepalived-Testing
- UML时序图
- 制作SM2证书
- [置顶] MapReduce 编程之 倒排索引
- JUnit学习总结
- jsp 说明标签
- HTML5 使用FileReader实现调用相册、拍照功能
- 格式化JSON数据
- Windows无法安装到这个磁盘
- vue-render函数和插槽
- 将Chrome插件Momentum背景图片设为桌面壁纸
- java 运算符的了解和运算符的优先级
- HihoCoder1338 A Game (区间DP)
- 计算机基础:计算机网络-chapter3
- Python开发【笔记】:列表转字典
- 再读c++primer plus 003
热门文章
- vue-router+iview(简单例子)
- LintCode刷题笔记--Longest Increasing Subsequence
- 下载额外数据文件失败 以下软件包要求安装后下载附加数据,但其数据无法下载或无法处理 ttf-mscorefonts-installer
- 【JZOJ5086】【GDOI2017第四轮模拟day1】数列 折半搜索
- 【风马一族_Android】无线连接|调试Android手机
- Ubuntu中NS2安装详细教程
- 如何把一个普通的Eclipse项目改造成Eclipse Plugin项目
- [Offer收割]编程练习赛104
- nginx简介 (转)
- Leetcode821.Shortest Distance to a Character字符的最短距离