PJAX引起代码高亮失效问题

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引起代码高亮失效问题

这是演示代码

方法一

方法二