How to display code in wordpress

How To Display Code In WordPress

Display Code in WordPress

In this article we will discuss about how to display code in wordpress post or page by using  Enlighter – Customizable Syntax Highlighter plugin. If you don`t have wordpress read our how to install wordpress article to install wordpress.

Install And Activate Plugin

We need to install the Enlighter – Customizable Syntax Highlighter plugin in wordpress. To install Enlighter  login to your wordpress admin and goto Plugins menu. And click Add new button to add new plugin to wordpress. Plugins -> Add new.

Enlighter Customizable Syntax Highlighter

Search Syntax highlighter in search box. Then install the Enlighter – Customizable Syntax Highlighter form the result by clicking Install button. After successfully installed click Activate button to activate Enlighter plugin.

Enlighter Source Code Block

After successfully activated Enlighter plugin. You can use enlighter source code block by using following steps.

Enlighter source code block

Goto Post and New post or you can use your existing posts.To add code block click add block plus icon and search Enlighter and choose Enlighter Sourcecode from the result.

Source Code Appearance

You will get the text box put your code to this text box. In Block -> Appearance from right panel you can change the appearance of your source code.

You should select you source code language in language dropdown. I have added javascript so i have selected javascript.

Enlighter Edittor

You can change your enlighter source code snippet theme by select theme from theme customizer. I have selected Monokai theme.

Enlighter Code theme

Enlighter have a global settings. It will apply as default appearance of code to all posts and pages. You can get enlighter default settings by clicking Enlighter menu.

Enlighter settings

All Done

Click preview button to check your post or blog. After successfully configured, publish your post or page. Now you will get code snippet in your post or blog.

Wordpress Code Snippet

Happy coding…