instantclick兼容Prismjs插件

代码相关 代码 pjax instantclick Prismjs

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

插件方面改动

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

在第58行找到<script>var pres = document.getElementsByTagName('pre');改成<script data-no-instant>var pres = document.getElementsByTagName('pre');

在第64行找到<script src="' . $jsUrl . '"></script>改成<script src="' . $jsUrl . '" data-no-instant></script

在第66行找到<script defer="defer" src="' . Helper::options()->pluginUrl . '/Prismjs/line-number-wrap-fix.js' . '"></script>改成<script defer="defer" src="' . Helper::options()->pluginUrl . '/Prismjs/line-number-wrap-fix.js' . '" data-no-instant></script>

就是挨个加data-no-instant

instantclick模板方面调整

在重载函数里添加

 if (typeof Prism !== 'undefined') {
Prism.highlightAll(true,null);}

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

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

 if (typeof Prism !== 'undefined') {<?php  if (Helper::options()->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';}<?php endif; ?>
Prism.highlightAll(true,null);
}

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

17条评论

    月亮下相遇

    这个评论框厉害!

    游客 Windows10 316天前回复

    John

    感谢,亲测完美

    游客 Windows7 770天前回复

    尚寂新

    行号重载不好使啊 @(泪) 求修复

    游客 Windows7 836天前回复

      Jrotty
      @尚寂新

      Prismjs插件的皮肤使用默认的也不行吗,如果不行qq弹我

      作者 安卓牛轧糖 836天前回复

    April's Blog

    我就试一下评论会不会让播放器重播 在我那会重新播放。。

    游客 Windows7 872天前回复

      Jrotty
      @April's Blog

      因为评论没有配置ajax @(你懂的)

      作者 Windows7 872天前回复

    悠然

    为什么会被打 @(滑稽)

    游客 Ios 876天前回复

    April's Blog

    听说这里要打起来了? @(滑稽)

    游客 Windows10 876天前回复

    Louie

    爬完这个坑,就可以爬下一个坑了。

    游客 Windows10 876天前回复

      Jrotty
      @Louie

      爬坑填坑,然后循环

      作者 Windows7 876天前回复

    化鹤归

    在去医院的路上 @(滑稽)

    游客 Windows7 877天前回复

    时间轨迹

    instantclick用了一段时间,发现问题太多,已弃用 @(挖鼻)

    游客 MacOS 877天前回复

    思绪的空中生活

    听说有人进医院了

    游客 安卓棒棒糖 877天前回复

智能推荐