首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >instantclick兼容Prismjs插件

instantclick兼容Prismjs插件

作者头像
泽泽社长
发布2023-04-17 17:39:34
发布2023-04-17 17:39:34
8970
举报
文章被收录于专栏:泽泽社泽泽社

最近yodu模板的用户要求我兼容typecho的Prismjs代码高亮插件,其实在《pjax(InstantClick) 常用的重载函数》中我就提到了Prismjs的pjax重载代码,但是经测试,还是有问题,于是今早又折腾了下,找到了方法。

插件方面改动

打开Prismjs代码高亮插件的Plugin.php文件

在第58行找到var pres = document.getElementsByTagName('pre');</code>改成<code><script data-no-instant>var pres = document.getElementsByTagName('pre');</code></p><p>在第64行找到<code><script src="' . $jsUrl . '">改成</script</code></p><p>在第66行找到<code><script defer="defer" src="' . Helper::options()->pluginUrl . '/Prismjs/line-number-wrap-fix.js' . '">改成

就是挨个加data-no-instant

instantclick模板方面调整

在重载函数里添加

代码语言:javascript
复制
 if (typeof Prism !== 'undefined') {
Prism.highlightAll(true,null);}

这样,代码高亮就完全好使了

但是随后又发现行号会不显示,于是想在重载下行号的函数,整理下就是如下代码

代码语言:javascript
复制
 if (typeof Prism !== 'undefined') {plugin('Prismjs')->showln): ?>
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);
}

php部分判断插件是否使用了显示行号,使用就重载行号函数; 因为是对插件进行了判断,所以如果没启用插件,直接用上面代码会导致网站错误500。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 插件方面改动
  • instantclick模板方面调整
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档