一个解决Pjax下代码高亮异常的方法

前言

最近给博客加入了代码高亮的功能，发现直接访问文章页面有代码高亮
但是进首页再点击文章页后，代码高亮消失，刷新才行
发现是Pjax的问题，解决后就在此做个记录并分享

Pjax

  Pjax是一种无刷新式打开链接的方式，是对Ajax+PushState的封装。用了Pjax后，某些Js只会执行一次，甚至不执行。因为，一般Pjax只刷新#main部分，而不刷新底部，顶部，边栏以及一些Js。

PrismJs实现的高亮代码

  主要包括自己设置的Prism高亮代码以及CodeHighlighter，不管哪个，只要是Prism，就可以通过以下内容重载。

主题设置Pjax重载

if (typeof Prism !== 'undefined') {
var pres = document.getElementsByTagName('pre');
                for (var i = 0; i < pres.length; i++){
                    if (pres[i].getElementsByTagName('code').length > 0)
                        pres[i].className  = 'line-numbers';}
Prism.highlightAll(true,null);}

footer.php添加pjax重载

<script type="text/javascript">
$(document).on('pjax:complete', function() {
if (typeof Prism !== 'undefined') {
var pres = document.getElementsByTagName('pre');
                for (var i = 0; i < pres.length; i++){
                    if (pres[i].getElementsByTagName('code').length > 0)
                        pres[i].className  = 'line-numbers';}
Prism.highlightAll(true,null);}
});
</script>

<script type="text/javascript">
$(document).on('pjax:complete', function() {
重载一
重载二
重载三
});
</script>

¥ 打赏

微信打赏

支付宝打赏