QQ爹の博客 QQ爹の博客

instantclick兼容Prismjs插件

in 代码相关 文章转载请注明来源!

最近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。

jrotty WeChat Pay

微信打赏

jrotty Alipay

支付宝打赏

文章二维码

扫描二维码,在手机上阅读!

代码pjaxinstantclickPrismjs
发表新评论
已有 16 条评论
  1. John
    JohnWindows 7谷歌浏览器
    回复

    感谢,亲测完美

  2. 尚寂新
    尚寂新Windows 7谷歌浏览器
    回复

    行号重载不好使啊 求修复

    1. Jrotty
      Jrotty本文作者Android NUC浏览器
      回复

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

  3. April's Blog
    April's BlogWindows 7UC浏览器
    回复

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

    1. Jrotty
      Jrotty本文作者Windows 7谷歌浏览器
      回复

      @April's Blog 因为评论没有配置ajax

  4. 悠然
    悠然iPhone OSSafari浏览器
    回复

    为什么会被打

  5. April's Blog
    April's BlogWindows 10谷歌浏览器
    回复

    听说这里要打起来了?

  6. Louie
    LouieWindows 10谷歌浏览器
    回复

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

    1. Jrotty
      Jrotty本文作者Windows 7谷歌浏览器
      回复

      @Louie 爬坑填坑,然后循环

PREVIOUS NEXT
雷姆
拉姆
音乐加载中...
0:00