Lifesign's Blog

prism.js渲染ajax代码高亮

昨天升级了下ghost,代码高亮采用prism.js 关于prism.js就不多说了,有兴趣的同学可以去官网观摩,很多知名网站都在用。

弄上prism之后 比之前这个主题自带的高亮漂亮多了 立马高大上。但是由于这个主题是采用ajax去加载新的post,你会发现如果之前的页面原本好好的高亮就会变成一坨翔。见图:

wtf!

当页面加载完的时候 代码高亮其实已经完成了 这时候在用ajax加载的内容就不会被高亮了 这就是问题所在。那么有没有一种方法可以重新渲染呢?

翻了翻prism.js的源码, 全局有暴露一个Prism对象,看到里面有一个highlightAll的方法,这个方法会查找页面中code标签 然后重新渲染他们。

1
2
3
4
5
6
7
highlightAll: function(async, callback) {
var elements = document.querySelectorAll('code[class*="
for (var i=0, element; element = elements[i++];) {
_.highlightElement(element, async === true, callback);
}
}

这样我们的问题就可以解决了,只需要在原本的控制ajax的fadeout函数里面 加上Prism.highlightAll();就可以了。

如果想要渲染单独的元素,可以使用highlightElement方法将元素传入。

1
2
var precode = document.getElementById('application-code')
Prism.highlightElement(precode);

更多方法参见官方文档