系统城装机大师 - 固镇县祥瑞电脑科技销售部宣传站!

当前位置:首页 > 网络编程 > 其它综合 > 详细页面

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

时间:2020-03-14来源:电脑系统城作者:电脑系统城

SyntaxHighlighter.js是一个代码高亮的JS插件,使用也很简单,但是由于是浏览器段执行JS代码来着色,会出现视觉上闪一下的效果。比如你的20行代码网页打开显示高度为100px,但是SyntaxHighlighter高亮后该区域高度变为120px 加上颜色的变化,这样的体验特别不好。

解决原理:把pre标签的样式定义为 高亮后的样式即可

解决方法:在shCoreDefault.css文件加上如下样式


 
  1. pre {
  2. line-height:22px !important;
  3. background-color:#f5f5f5!important;
  4. border:1px solid #ccc!important;
  5. border-radius:4px!important;
  6. width:98% !important;
  7. margin:.3em 0 .3em 0!important;
  8. padding:0 0 0 1em!important;
  9. font-size:13px !important;
  10. font-family:Monaco,Menlo,Consolas,"Courier New",monospace;
  11. }

即可这样就不会出现大面积的闪烁了,然后按F5强制刷新浏览器缓存,查看效果,如果还是有细微差距,可以自己微调SyntaxHighlighter 的 CSS样式。

分享到:

相关信息

  • C++ AVLTree高度平衡的二叉搜索树深入分析

    一、AVL树的概念 二、AVL树节点的定义 三、AVL树的插入 四、AVL树的旋转 1.左单旋 2.右单旋 3.左右双旋 4.右左双旋 五、进行验证 六、AVLTree的性能...

    2023-03-09

  • idea构建web项目的超级详细教程

    1、idea构建web项目 1、新建一个空项目 2、新建java模块,名为webDemo1 3、选择webDemo1右键,选择Add Framework Support 4、在WEB-INF下新建文件夹classes和lib 5、打开项目结构(Project Structure) 6、项目配置 7、模...

    2023-03-09

系统教程栏目

栏目热门教程

人气教程排行

站长推荐

热门系统下载