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即可