PJAX引起代码高亮失效问题

发布于 / 代码·杂谈 / 0 条评论

pjax是jquery的一个插件,它使用ajax和pushState两个技术改善用户的网页浏览体验。具体来说,当用户使用a标签切换页面时,可以实现局部刷新的技术。
Pure-Highlightjs是Github上一款开源代码高亮插件,在WordPress上能更好展示各种代码,操作简单,多种样式,多种语言。

这是演示代码

<html>
<head>
<title>hello
<body>
<p>you happy jiu ok
</body>

现在看起来插件效果不错,但是达到此效果真可谓一波三折,主题PJAX引起插件js不加载,造成代码无法渲染,最简单的解决办法关掉PJAX就可以恢复正常,既然发现问题那就解决问题,顺便记录一下。此处省去600字,今天我们不吹水,不讲过程 只说结果

方法一

打开主题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  = 'pure-highlightjs line-numbers';}
Prism.highlightAll(true,null);}
});
</script>

方法二

pjax或complete为关键字查找主题Js文件,在主题的 Pjax 加载完成后的回调函数中添加代码(两种代码任选其一)

代码1.

Prism.highlightAll();

代码2.

// Say you have a code block like this
/**
<pre> 
  <code class="language-javascript line-numbers">
      // This is some random code
      var foo = "bar"
   </code >
</pre >
**/

// Be sure to select the inner and not the
// Using plain Javascript
var block = document.getElementById('some-code')
Prism.highlightElement(block);
 
// Using JQuery
Prism.highlightElement($('#some-code')[0]);

结语:方法二需要查找到对应js文件,一般主题使用方法一即可解决,博主使用方法一悬浮窗无法渲染代码,在Inspire主题的app.js文件pjax:complete下插入方法二 代码1 成功解决了悬浮窗代码无法渲染的问题。

 

修改后清除浏览器缓存,或用浏览器自带的无痕模式访问即可查看修改后的效果!

转载原创文章请注明,转载自: 阿恰博客 » PJAX引起代码高亮失效问题
Not Comment Found