Preface#
After enabling pjax partial refresh, when entering the next page, only the relevant article files need to be loaded, and most files do not need to be reloaded, which can greatly reduce the website's load. There is no abrupt interface jump for visiting users, and the user experience is also good.
However, if prism code highlighting is also enabled, when entering the article page, the prism.js file will not be reloaded, which causes the code highlighting in the article to fail.
The Prism code highlighting reload function provided by my theme is not effective in this case, so I had to look for other solutions.
There are several solutions online for this situation, and here is one of the simplest solutions for WordPress.
Modify Related Files#
The method is indeed very simple, just modify one file. For Asky series themes, the location of the file to be modified is /wp-content/themes/ASky/js/jquery.pjax.js. If it is not this type of theme, it is recommended to search for the name of this js file.
The modification is below Line 312, as shown in the image below.
The relevant code is as follows:
//Prism Reload
if (container.contents.find("code[class*='language-']").length > 0)
$.getScript("/wp-content/plugins/ank-prism-for-wp/out/prism-js.min.js");//Your Prism.js location
Since the Prism plugin is used, the file location in the last line is the location of prism.js used in the plugin.
After setting up, you can use code highlighting normally. Additionally, if you are using a CDN, the cache may take a while to update. You can manually refresh this file in the CDN console. When refreshing, pay attention to whether there is ?ver=x.x.x after the jquery.pjax.js file loaded by the website. If there is, remember to include it.