How To Show Syntax Highlighting Within The WordPress Text Editor

Syntax Highlighting Within The WordPress Text Editor

One of the common mistakes that can cause a whole website to shut down happens to be syntax error.

Granted that coding line after line can be tedious for any programmer and chances are that the programmer in question may forget a bracket or get the spacing wrong – but such small errors can result in syntax errors which in turn can cause your website to develop issues.

This is why, it is important that you double check your coding to ensure that the syntax is correct. This may sound a tad overwhelming especially if you are developing hundreds of lines of codes.

In such cases, it is always a good idea to show syntax highlighting within WordPress text editor as that can help you spot your errors on time so that you can take edit them same out. The process is simple enough and easily implemented, read on to know more.

HTML:

The fact is that WordPress comes with a HTML text editor but it does not come with syntax highlighting, in other words, if you are going to code in HTML and want syntax highlighting.

You would have to add in a syntax highlighter to highlight the respective codes so that you do not leave any open tags or make simple mistakes that can lead to errors which can bring down your website, leading to loss of prospective customers and leads.

This is why it is important that you use the right plugin to highlight your codes, so that simple mistakes can be avoided easily.

Adding the plugin:

Just log into your admin area of your website, head over to plugins and click on ‘add new’. Now click on the empty field and type in the name of your preferred plugin.

There are a few plugins that you may want to try out such as “Developer formatter”, “FV code highlighter” as well as “WP-SynHighlight”. All of these are equally good and should help to highlight the syntax and in the process, enable you to avoid simple syntax error issues.

For example, Developer Formatter which is based on the GeShi engine, supports over 100 languages. Whereas FV Highlighter supports only the commonly used languages such as HTML, PHP, and XML.

WP-SynHighlght, stands out from the rest as it comes packed with the functionality to highlight the codes in real time, as you type them out. Just click on search plugins and install the one that you want, on your website.

Installation:

Once you have chosen the plugin, all you need to do is to click on “install”, confirm by clicking on “Ok” and activate the plugin in question. Now, you should be able to get all your syntax highlighted without any hassle.

Customize:

Now you can scroll down the list of installed plugins, choose the one that you have just installed and head over to the settings page of the plugin so that you can customize it as per your preference.

If you do not see this menu under the settings tab, then it may be located under a different tab so make sure that you check them out. Once you have configured your plugin, you should be able to use the same easily.

All you have to do is to head back to your admin dashboard, click on new posts and start coding to see the syntax highlighter in action.

Tip:

If your website is hosted on WordPress.com, then you do not need to download and install any syntax highlighter plugin but instead you can highlight the syntax in your post.

This can be quite useful especially if you are teaching beginners how to code in HTML. Please remember that WordPress.com does not highlight the syntax on your HTML editor on its own.

Additional tip:

A few syntax plugins often only highlight syntax when you add content in with the code. In other words, these plugins may not work when you add the code alone, using the HTML editor which is why it is a good idea to create content in with the code.

Given this, you may want to check out each highlighter plugin and confirm that it is a right fit for you.

Here are some of the top 5 syntax highlighter plugins which are quite popular given their functionality and the fact that they all support multiple languages.

1. Crayon Syntax highlighter:

This is probably one of the best syntax highlighters that you can get your hands on today. It is quite popular on account of the fact that it supports multiple languages, themes and fonts.

This WordPress plugin can be easily installed in no time at all, and what’s more, it also comes with an integrated theme editor as well. It also features live preview in settings as well, which is why it tends to stand well above most other syntax highlighters.

2. Enlighter – customizable syntax highlighter:

This is an easy to use and completely customizable syntax highlighter that you can use to highlight the syntax on your HTML editor.

What’s more, you can use this plugin to bind your code with short codes, and more importantly, it supports the creation of tab panes, to display the various code groups for your easy convenience.

3. WP-Syntax:

This is another WordPress plugin that provides you with a clean way to highlight your code. It supports a wide range of languages and runs on GeSHi; furthermore, it supports highlighting with or without line numbers and maintains formatting when copying snippets of code online.

4. Syntax highlighter evolved:

This is yet another popular highlighter developed by Automatic. With this plugin, you should be able to easily highlight the codes with ease, and it supports multiple languages as well.

5. IG – Syntax Hiliter:

This highlighter allows you to copy code from your text editor and allows you to post the same to your website, while maintaining the coloring and the formatting of the code.

You just need to copy and paste the code from your code editor and that’s it, the plugin takes care of the rest.

The above steps should tell you how to show syntax highlighting in text editor in WordPress; the fact is that WordPress comes with advanced functionality and you should be able to install and activate the required syntax highlighter plugins with ease, on your WordPress website.