当前位置: 首页 > news >正文

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

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

http://www.jsqmd.com/news/161357/

相关文章:

  • 如何快速部署PyTorch-CUDA-v2.7镜像实现高效模型训练
  • 检测字符语言种类
  • 什么是 ‘Adversarial Evaluation’?利用专门的“坏人 Agent”去寻找你系统中的安全漏洞
  • 论文AI率高怎么办?十大降AI工具避坑指南
  • 孩子近视越早度数高怎么办?|早期防控措施与日常调节方案
  • PyTorch-CUDA-v2.7镜像中记录每次实验的配置与结果
  • PyTorch-CUDA-v2.7镜像中比较不同CUDA版本的性能差异
  • Bash脚本实战:从重复劳动中解放出来
  • PyTorch-CUDA-v2.7镜像中运营微信公众号定期推送资讯
  • 孩子已经近视了,还有必要防控吗?
  • 基于SpringBoot + Vue的医院管理系统
  • 102301242陈溢滨总结
  • 全局变量nt!PpDeviceReferenceTable和驱动设备nt!_DEVICE_REFERENCE的关系
  • PyTorch-CUDA-v2.7镜像适合初学者入门深度学习吗
  • 对偶空间
  • AList网盘挂载实战指南:解决一刻相册配置难题
  • 基于SpringBoot + Vue的农产品系统
  • nmcli
  • 软件工程课程学习总结
  • 什么是过拟合
  • 基于Uniapp + SpringBoot + Vue的商城系统
  • WSLRegisterDistribution failed?用PyTorch-CUDA-v2.7避免系统冲突
  • PyTorch-CUDA-v2.7镜像中制定服务等级协议SLA保障可用性
  • 远超各大行业,「网络安全」领域平均年薪37.33万元人才缺口竟达150万
  • PyTorch-CUDA-v2.7镜像中调整max_new_tokens参数的最佳实践
  • 基于SpringBoot + Vue的商城管理后台系统
  • 不藏着掖着了!Wireshark命令、捕获、过滤器大全,一篇文章都给你整理好了
  • PyTorch-CUDA-v2.7镜像中处理大规模文本数据的内存优化技巧
  • PyTorch-CUDA-v2.7镜像中发布技术白皮书建立专业形象
  • Java毕设项目推荐-基于vue3+springboot的球赛购票系统设计实现基于vue的球赛购票系统设计【附源码+文档,调试定制服务】