2019JAVA中ajax不高亮_解决AJAX(PJAX)下代码高亮无法渲染的问题

我在用的wordpress代码高亮插件是Pure Highlightjs，很轻便简洁的一款高亮插件。在做本站这套主题的时候，发现一个问题

当页面通过AJAX的方式加载的时候，内容页的代码高亮部分无法渲染，也就是高亮插件没有加载

考虑到AJAX的原理，初步判断是负责渲染的js没有执行，于是就找插件的代码看了一通，发现关键的部分

hljs.initHighlightingOnLoad();

于是就把这句加到AJAX执行后的complete事件里……发现居然不生效……好吧，继续摸索

接着又想到可能还需要在AJAX时重新加载一下高亮所需的js文件，于是网上就找了几个动态加载js文件的函数，最终找到一个比较完美的，可以设置动态加载js文件完成后的事件

//loadJS

function loadscript(url, callback){

var script = document.createElement ("script")

script.type = "text/javascript";

if (script.readyState){

script.onreadystatechange = function(){

if (script.readyState == "loaded" || script.readyState == "complete"){

script.onreadystatechange = null;

callback();

}

};

} else {

script.onload = function(){

callback();

};

}

script.src = url;

document.getElementsByTagName("head")[0].appendChild(script);

}

使用：

loadscript(highlight_pluginUrl,function () {

hljs.initHighlightingOnLoad();

});

我擦，居然还不生效……奇了怪的，继续返回去研究高亮插件的代码，原来是基于Pure Highlightjs这款插件是基于highlight.js项目的

它的高亮渲染调用方法有 initHighlightingOnLoad 、initHighlighting 等，而之前用的 initHighlightingOnLoad 是页面加载事件，所以需要更换一下调用方法

loadscript(highlight_pluginUrl,function () {

hljs.initHighlighting();

});

丢到AJAX的complete事件，完美！