How to insert highlighted code under the WordPress visualization designer

 

Edit using WordPress background EditorArticleUsually need to insertProgramCode, How to make the inserted code intuitive and easy to read? Code highlighting is a good method. In visual design mode, how does one insert highlighted Code directly without switching to HTML mode? In this tutorial, you will find that inserting highlighted code is so simple that you can switch between the visualization and HTML designer at will.

First, we need to install two plug-ins WP-syntax and WP-syntax button. If you do not install Wordpress, you can view the tutorials on how to install plug-ins and themes in WordPress.

1. WP-Syntax: Introduction

2. WP-syntax button: Introduction

3. After the WP-syntax plug-in is installed, We need to insert the highlighted code in the article, which can only be operated in the HTML editor. In this case, you cannot directly operate in the visual editor, this plug-in does not provide visualized operation buttons.Note: Do not switch between visualization and HTML after the operations are completed in HTML. Otherwise, the added highlighted code will be lost or incorrect.

4. It is really uncomfortable to switch operations. In the future, I accidentally or forgot to switch to the visualized operation. The highlighted code becomes invalid and we need to modify it. Isn't it very troublesome .....

5. Xiaofeng caotang found a good solution to this problem: Use the WP-syntax button plug-in. First install the WP-syntax plug-in, and then install the WP-syntax button plug-in. The WP-syntax button plug-in depends on the WP-syntax plug-in. After installation, a button will be added to the visualization panel. We will use this button to add highlighted code.

6. usage. For example, in the visual editor, we insert code into the article.<? PHP echo "Xiaofeng caotang www.cnitman.com";?>Select the code and click the code button. In the displayed dialog box, select the corresponding code language. If you want to display the number before the code, you only need to enter the start number in the line option in the pop-up box. Click Insert to complete the operation.
Preview the article and check whether the code is cool.

2	<? PHP Echo "Xiaofeng caotang www.cnitman.com";?>

Switch to the HTML editor and switch to the visual editor to preview the article. The code is not changed and cool.

 

Original Article Source: how to insert highlighted code under the visualization designer