泽泽の博客 泽泽の博客

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

支付宝打赏

文章二维码

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

本文基于《 署名 - 非商业性使用 - 相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
文章链接:https://qqdie.com/archives/instantclick-compatible-prismjs-plugin.html (转载时请注明本文出处及文章链接)

代码 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
雷姆
拉姆