[UEditor]代码高亮效果前台不显示解决办法

问题描述

今天看我的这个站点,所有涉及到代码高亮的部分都显示不正常,之前也发现到了这个问题,以为是页面没加载完成。这次有了新的发现,总是刚刷新页面的时候,代码高亮还正常,但是过了一会,像是页面加载完成了,就显示不正常了。我想着是不是被什么js或css冲突了。

不正常的代码高亮

ueditor代码高亮不正常显示效果

查找原因

网上流传的解决办法是:要在网页内加入如下代码高亮的引用。但是我的网页内明明已经存在这样的引用了,看来问题不在这里。

<link href="你的ueditor路径/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css" />   
<script type="text/javascript" src="你的ueditor路径/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>   
<script type="text/javascript">       
    SyntaxHighlighter.all();       
</script>

我仔细看了下firebug里的网络加载,发现每次加载到百度分享的时候:api.baidushare.com,代码高亮就不正常了,怀疑是这里冲突了,但是仔细看代码,没发现影响到代码的地方,注释掉了百度分享代码部分,刷新页面,发现仍是乱码,看来原因不在这里。

仔细观察了网页加载的请求,发现有一个加载了prettyprint.js文件。百度了一下该文件,也搜不到非常准确的相关内容。从代码中了解到也是对<pre></pre>标签做处理的,就想着很有可能是这里冲突了。于是,对网页里加载的相关prettyprint.js文件的内容进行了注释。然后刷新网页,就正常了。

代码高亮正常显示效果

代码高亮正常显示效果

总结

做网站,做Web程序总会遇到这样那样的问题,碰到问题怎么解决,解决方法很重要。这篇文章或许能给你些思路方面的参考。大家碰到问题也欢迎加入我们的QQ群进行交流。

分享到:更多 ()

抢沙发

评论前必须登录!