The zblog code highlights the plug-in Jz52_code that supports the code one click copy function

The front-end code highlighting effect of the zblog ueeditor editor is relatively simple. The common code highlighting window has no one click copy button, which makes it inconvenient for visitors to copy long code. Although the impact is small, adding a one click copy button can also improve the user experience of the website. After all, the user experience is also part of SEO.

For ordinary zblog users, it may be complicated to add one click copy function to code highlighting, so using plug-ins will be a shortcut. This [code highlighting+code one click copying] plug-in with the application center ID of "Jz52_code" can realize the code one click copying function.

This is a small plug-in that supports UE editor and NE editor. The main function is to modify the default code highlighting style of the ueeditor editor, and insert an icon button of the copy function in the upper right corner. The copy function uses the clipboard.min.js plug-in.

How to use plug-ins

The background application center searches for "Jz52_code", and then installs the application. The effect is as follows:

If you prefer the default code highlighting style or want to modify the code highlighting style yourself, you can modify the style file zb_users/plugin/Jz52_code/Jz52_code.css , the effect is as follows:

PS: If you simply want a one click copy function of code, you can reference the clipboard.min.js file in the current usage theme, and then refer to the js code of this plug-in to insert the one click copy button in the highlighted HTML node of the code, so that you can avoid installing plug-ins.