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

本文主要讲解关于防止SyntaxHighlighter.js的代码高亮时闪一下的解决方法相关内容，由优网导航（www.uonce.com）提供，欢迎关注收藏本站！

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

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

程序员导航

优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站

立即访问

解决方法：在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 去掉右侧滚动条的方法
SyntaxHighlighter自动识别并加载脚本语言
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
SyntaxHighlighter 3.0.83使用笔记
ckeditor syntaxhighlighter代码高亮插件配置分享
CKEditor中加入syntaxhighlighter代码高亮插件
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
解决SyntaxHighlighter 代码高亮不换行问题的解决方法
FCKeditor + SyntaxHighlighter 让代码高亮着色插件
代码着色之SyntaxHighlighter项目(最流行的代码高亮)
syntaxhighlighter 去掉右上角问号图标的三种方法
为SyntaxHighlighter添加新语言的方法
SyntaxHighlighter配合CKEditor插件轻松打造代码语法着色
SyntaxHighlighter语法高亮插件使用说明
ckeditor syntaxhighlighter代码高亮插件，完美修复
coolcode转SyntaxHighlighter与Mysql正则表达式实现分析
FCKeditor 和 SyntaxHighlighter 代码高亮插件的整合
SyntaxHighlighter 语法高亮插件的使用教程
使用SyntaxHighlighter实现HTML高亮显示代码的方法
FCKEditor SyntaxHighlighter整合实现代码高亮显示
SyntaxHighlighter代码加色使用方法
syntaxhighlighter 使用方法
关于实现代码语法标亮 dp.SyntaxHighlighter
SyntaxHighlighter Autoloader(自动加载)最优方式

相关推荐: Edge浏览器开发者工具代码修改同步到Vscode中
AI 工具导航
优网导航旗下AI工具导航，精选全球千款优质 AI 工具集
立即访问

本文主要讲解关于Edge浏览器开发者工具代码修改同步到Vscode中相关内容，由优网导航（www.uonce.com）提供，欢迎关注收藏本站！浏览器调试修改的代码大家好，我是零一，你们一定一定一定遇到过这样一个情况：假设我们在浏览器的开发者工具调试自己写…