防止SyntaxHighlighter.js的代码高亮时闪一下的解决方法
2020-03-19 12:06
721 查看
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样式。
您可能感兴趣的文章:
- SyntaxHighlighter自动识别并加载脚本语言
- SyntaxHighlighter 3.0.83使用笔记
- ckeditor syntaxhighlighter代码高亮插件配置分享
- CKEditor中加入syntaxhighlighter代码高亮插件
- 解决SyntaxHighlighter 代码高亮不换行问题的解决方法
- syntaxhighlighter 去掉右上角问号图标的三种方法
- 为SyntaxHighlighter添加新语言的方法
- ckeditor syntaxhighlighter代码高亮插件,完美修复
- SyntaxHighlighter 语法高亮插件的使用教程
- 使用SyntaxHighlighter实现HTML高亮显示代码的方法
相关文章推荐
- sublime text下代码太长brackethighlighter不能正确显示闭合高亮的解决方法
- Chrome内核下由ashx输出的js代码不起作用的解决方法
- asp.net调用js代码乱码解决方法
- 如果页面引用了外部JS代码,会被IE缓存的解决方法
- eclipse中默认js编辑器非常慢,尤其在拷贝粘贴代码时的解决方法
- Chrome内核下由ashx输出的js代码不起作用的解决方法
- js防止DIV布局滚动时闪动的解决方法
- 代码高亮插件SyntaxHighlighterde
- js代码从页面移植到文件里失效或js代码改动后不起作用的解决的方法
- 调试Web页面时,如果页面引用了外部JS代码,会被IE缓存的解决方法
- [iOS]Xcode解决代码高亮、语法提示、错误警告等功能失效的解决方法
- 代码高亮插件推荐——SyntaxHighlighter++
- FCKeditor + SyntaxHighlighter 让代码高亮着色插件
- javascript实现代码高亮-wangHighLighter.js
- Xcode解决代码高亮、语法提示、错误警告等功能失效的解决方法
- eclipse中默认js编辑器非常慢,尤其在拷贝粘贴代码时的解决方法
- vue.js element-ui validate中代码不执行问题解决方法
- js常用代码示例及解决跨域的几种方法
- JS代码不起作用解决方法
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结