Kindeditor code highlighting bug solution under wordpress

I sorted out the usage for your reference.

The front-end page first loads the plug-in script and style:

The code is as follows:	Copy code
<Link rel = "stylesheet" type = "text/css" href = "[kePath]/plugins/code/prettify.css"/> <Script type = "text/javascript" src = "[kePath]/plugins/code/prettify. js"> </script> <Script> $ (Function () {prettyPrint ();}); </Script>

Add the plug-in style when declaring in the background editor. By default, this parameter is used to insert code in the editor, which is the same as that in common text and hidden when being edited again. Therefore, this step is critical.

The code is as follows:	Copy code
Var editor = KindEditor. create ('textarea. Editor ',{ CssPath: ['[kePath]/plugins/code/prettify.css'] });

You can configure code highlighting in the above method. If you enable kindeditor code highlighting in the wordpress background, you can use the google code highlighting style for your published code, however, a bug was found during use, that is, the code is highlighted only after the page is fully loaded. Before that, the code is grayed out, and sometimes the image of individual external links is slow, the code remains in the gray "unreadable" state for a long time.

Cause analysis:

The window. onload, so it will only be executed when the page is fully loaded, including the download of image files, while our website uses a large number of third-party resources, such as gravatar's profile picture, Baidu share, let's talk more about comments or something. Maybe they will take some time (gravatar's profile picture is too slow), so prettyPrint will never be executed and the code will be grayed out.

Modification method:

Open the/wp-content/plugins/kindeditor-for-wordpress/kindeditor-class.php file and find:

The code is as follows:	Copy code
Window. onload = function (){ PrettyPrint (); } To: $ (Function (){ PrettyPrint (); })

Save and exit. Open the/wp-content/plugins/kindeditor-for-wordpress/kindeditor. Php file and find:

The code is as follows:	Copy code
Add_action ('WP _ enqueue_scripts ', array (& $ kindeditor, 'Add _ head_script ')); To: Add_action ('WP _ footer ', array (& $ kindeditor, 'Add _ head_script '));

Register the highlighted code js of Kindeditor at the bottom (note: you don't have to go to wp_footer. You can modify it based on the actual situation. In short, it will be fine after jQuery is introduced) and save it.