Typecho prism等高亮代码pjax重载函数

转载
admin

之前用wordpress的时候,从来没遇到过这种问题。高亮代码后,不管怎么看都是高亮。自从用上typecho,发现有些主题直接访问文章页面有高亮代码;但是,进首页再点击文章页后,代码高亮消失,刷新才行。
后来,发现这些主题都有一个共同点,都支持pjax,并且我开启了pjax。pjax是一种无刷新式打开链接的方式,是对ajax+ pushState的封装。后来,又慢慢的了解到用了pjax后,某些js只会执行一次,甚至不执行。因为,一般typecho主题的pjax只刷新#main部分(每款主题有差别,就这个意思吧),而不刷新底部,顶部,边栏以及一些js。好在,pjax还有一个功能,即pjax重载。它可以将你未成功加载的js再次加载一遍。下面,就是本篇教程具体内容,针对Typecho高亮代码所写的pjax重载函数。
prismjs实现的高亮代码
主要包括自己设置的prism高亮代码以及CodeHighlighter,不管哪个,只要是prism,就可以通过以下内容重载。
主题设置pjax重载
这部分内容,需要你的主题后台,有设置pjax重载的选项。如果你的主题不支持设置pjax重载,请看footer.php添加部分所述。

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);}

Typecho prism等高亮代码pjax重载函数
footer.php添加pjax重载
如果主题不支持设置pjax重载,请打开主题的footer.php文件,在</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>

当然,如果你魔改了主题很多地方,比如通过js实现了一些功能,发现有时候需要刷新才生效,那就是需要pjax重载。你可以将你的pjax重载添加到本文中的pjax重载函数中。不懂,请看下图以及代码举例。

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

Typecho prism等高亮代码pjax重载函数

版权协议须知!

本篇文章来源于 会飞的鱼 ,如本文章侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意

1883 0 2019-11-15

奇幻都市–诸天至尊

诸天至尊作者:纯情犀利哥分类:都市生活字数:3316359...

阅读全文
奇幻修真–黑狗修仙传

黑狗修仙传作者:老不歪分类:奇幻修真字数:659399作品...

阅读全文
十二生肖老鼠为什么排名第一?生肖鼠的故事

传说有一天玉皇大帝要排十二生肖,定下了牛、虎、兔、龙、蛇、...

阅读全文
2020年“微语程序”正式新春公测版发布

版权提示:微语程序免费开源禁止用于商业用途(如有有人执意要...

阅读全文
选择表情
  • 默认
  • 护眼
  • 夜晚
  • Serif
  • Sans