首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Prism代码高亮Pjax重载函数

Prism代码高亮Pjax重载函数

作者头像
HCG_Sky
发布2020-07-23 21:51:21
1.2K0
发布2020-07-23 21:51:21
举报
文章被收录于专栏:HCG_Sky's BlogHCG_Sky's Blog

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

前言

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

Pjax

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


PrismJs实现的高亮代码

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

主题设置Pjax重载

↓这部分内容,需要你的主题后台,有设置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);}

↓如果你的主题不支持设置pjax重载,请看footer.php添加部分所述↓

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>

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-04-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • Pjax
  • PrismJs实现的高亮代码
  • 主题设置Pjax重载
  • footer.php添加pjax重载
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档