
一个解决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重载
↓在 /body 前添加如下内容即可↓
<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>
需要刷新才生效,那就是需要Pjax重载
你可以将你的Pjax重载添加到本文中的Pjax重载函数中
↓不懂?请看下图以及代码举例↓
<script type="text/javascript">
$(document).on('pjax:complete', function() {
重载一
重载二
重载三
});
</script>

本篇文章采用 署名 4.0 国际 (CC BY 4.0) 许可协议进行许可。
arrow_back
上一篇
arrow_forward
下一篇