How to Highlight Syntax in the WordPress HTML Editor

Highlighted text is much easier to work with.

Most programmers write their code in text editors that highlight their syntax as they write. With different tags and commands given different colors, a highlighted piece of code is easier to make sense of than a block of black text. It is also easier to pin-point errors such as unclosed tags. Unfortunately, by default the HTML mode in the WordPress visual editor. However, a plug-in like WP Advanced Code Editor can highlight the code for you.

Instructions

1. Log in to your WordPresss admin control panel. Click "Plugins," then click "Add New." In the search field box, type "WP Advanced Code Editor", then click "Search Plugins." When the search results appear, find "WP Advanced Code Editor" on the list, and click the install link which is below its title. Wait a few seconds as the plug-in installs into your blog, then click "Activate Plugin."

2. Click "Users" from the left-side menu bar, then click "Your Profile." You cannot use the Advanced Code Editor plug-in while the WYSIWYG visual editor is activated. Click the check box next to "Disable the visual editor when writing," then scroll to the bottom of the page and click "Update Profile." If you want to type posts in the normal way again, simply uncheck this box at any time and update the profile.

3. Click "Posts" or "Pages," the click the title of the post or page you want to edit with highlighted code. When the editing screen loads up, wait a moment for the advanced editor to replace the standard editor in the middle of the screen. The code will be highlighted, and you'll also be shown line numbers down the left of the screen. To switch back to the standard editor, uncheck the "Toggle Editor" check box at the bottom of the editing window.

Tips & Warnings

• You can also search the page by pressing the binoculars button, jump to any line of code by pressing the arrow button, and change the size of the text with the drop-down menu. For large pages with lots of code, try the full screen mode by clicking the monitor icon.

References

• WordPress Plugin Directory: WP Advanced Code Editor