Preface
After enabling pjax partial refresh, when entering the next page, only the relevant files of the article need to be loaded, and most of the files do not need to be reloaded, which can greatly reduce the load on the website. There is no abrupt interface jump for visiting users, which is also good for user experience.
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 situation, so I have to look for other solutions.
There are several solutions to this situation online, and here is one of the simplest solutions for WordPress.
Modify the relevant files
The method is indeed very simple, just modify one file. For the Asky series theme, the modified file is located at "/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 position is below Line 312, as shown in the figure 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 Prism plugin is used, the file location in the last line is the location of prism.js used in the plugin.
After the settings are completed, code highlighting can be used normally. In addition, if a CDN is used, the cache may last longer. You can manually refresh this file in the CDN console. When refreshing, pay attention to whether there is "?ver=x.x.x" after the loaded jquery.pjax.js file on the website. If there is, remember to include it.