咔叽游戏

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 388|回复: 0

[网页播放器] 防止SyntaxHighlighter.js的代码高亮时闪一下的解决方法

[复制链接]
  • TA的每日心情
    无聊
    2019-6-2 14:11
  • 签到天数: 4 天

    [LV.2]圆转纯熟

    发表于 2020-7-2 22:27:00 | 显示全部楼层 |阅读模式
    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样式。

    原文地址:https://www.jb51.net/article/182677.htm

    QQ|免责声明|小黑屋|手机版|Archiver|咔叽游戏

    GMT+8, 2024-3-28 21:02

    Powered by Discuz! X3.4

    © 2001-2023 Discuz! Team.

    快速回复 返回顶部 返回列表