pjax导致Prism代码高亮失效解决办法

文章版权： Postbird-There I am , in the world more exciting!
本文链接： http://www.ptbird.cn/pjax-not-prism.html
转载请注明文章原始出处

prism.js是我非常喜欢的一款代码高亮的插件，使用简单，并且样式多样，支持的语言也多。

我之前的wordpress的站点也是使用的prism来进行代码高亮，只不过之前使用的是黑色主题，现在觉得有点突兀。

代码高亮的样式可以在官网定制并选择插件下载：官网链接

这是我现在的主题：

上篇文章解决了启用了pjax之后多说加载失效的问题，文章链接

但是新的问题也出现了，就是prism.js的渲染问题。

问题描述

启用Pjax之后，prism.js由于事件绑定(可以查看上一篇文章)的问题无法正确渲染，prism是根据 class="language-scala" 来进行辨别和渲染代码的。

解决办法（1）

可以参照上面关于多说的解决办法，也就是在pjax的complete之后进行加载就可以。

解决办法（2）

利用 ?ver=Math.random()

我的js是存储在七牛上的，请求七牛的时候可以根据ver来判断版本。

这里我不判断版本就是直接请求一个不一样的，这样子每次数据加载，实际上都是重新加载的新的（这个新不是指内容而是时间）。

因为本身prism.js此时是没有缓存的，所以会加载并执行渲染代码。

解决办法（3）

参照百度统计的脚本加载，也就是在每个容器加载js而不是在整体的容器（这里的容器是pjax中的概念）加载js脚本。

具体代码如下：

var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = 'http://static.ptbird.cn/prism.js?ver='+Math.random();
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();

单独页面加载完之后在写入js即可