爱资料 网 欢迎您的到来,我们在这里提供了免费网页模板、编程资料、开发资料、开发软件、在线工具
主页 > 信息资讯 > 爱捣鼓 > 百度编辑器SyntaxHighlighter代码高亮延时加载渲染解决方案

百度编辑器SyntaxHighlighter代码高亮延时加载渲染解决方案

作者:apizl 更新:2018-06-09 10:17:50 阅读:133次

百度编辑器代码高亮一直在使用时候发现,如果界面上使用了很多js加载进行其他功能渲染操作,会导致代码块渲染在浏览器整体加载完才渲染。

百度编辑器SyntaxHighlighter代码高亮延时加载渲染解决方案

这个时候如果有超长的代码块,就会在加载完前几秒钟非常难看。这个时候我们需要给pre标签一个默认的样式来过渡这一个时间。

或者使用更好的遮罩层。

<style>

pre { display: block; padding: 9.5px; margin: 0 0 10px; font-size: 13px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre; white-space: pre-wrap; background-color: #f5f5f5; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,0.15); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

</style>

过渡样式:

百度编辑器SyntaxHighlighter代码高亮延时加载渲染解决方案

完成样式:

百度编辑器SyntaxHighlighter代码高亮延时加载渲染解决方案



文章由爱资料原创本文地址:https://www.apizl.com/archives/view-134222-1.html,转载请以链接形式标明本文地址!
下一篇:没有了
Tag:百度编辑器  

相关推荐


分享:
0