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);

更多方法参见官方文档