prism.js渲染ajax代码高亮

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

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

wtf！

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

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

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方法将元素传入。

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

更多方法参见官方文档