Teronga

How to display code in WordPress posts

When trying to display HTML, php or any other code in WordPress blog posts, it will be quite difficult to display code in WordPress as it (WordPress) executes the code instead of displaying it. So rather than seeing the code blocks written there, you’ll see the implementation of your code executed in the post. Even <code> or <tt> tags are not going to help you to display the exact code.  So, how can we show code in the posts?

Well, the answer is in using a proper plugin.  There are many plug-ins available which can help you but I am going to introduce just one right now. I will be writing a blog post about some of the Code highlighting plugins available in future which will be described with there distinctive features.

I am introducing WP-Syntax. This plug-in displays the code instead of executing  in WordPress posts. And it also highlights the code with various colors as you see in your code editor. It is very easy to install and use like any other plugins.

Installation steps:

  1. Download plug-in here.
  2. Upload wp-syntax.zip to your WordPress plugins directory, usually wp-content/plugins/ and unzip the file. It will create a wp-content/plugins/wp-syntax/ directory.
  3. Activate the plugin through the ‘Plugins’ menu in WordPress.
  4. Create a post/page that contains a code snippet following the proper usage syntax.
How to use this plug-in:

Wrap code blocks with <pre lang="LANGUAGE" line="1"> and </pre> where
LANGUAGE is your coding language. The line attribute is optional.

Example1: to display php code with line numbers,

<pre lang="php" line="1"> your php code </pre>

Example2: to display HTML code without line numbers,

<pre lang="HTML"> Your HTML code </pre>

Don’t worry if you find it is difficult to use the above <pre lang="LANGUAGE" line="1"> and </pre> method while posting. There is another plug-in called WP-Syntax Editor Integration Plugin. This plug-in adds a new button to both Visual and HTML editors in wordpress. After installing the above plug-in, go to New post area and select the code that you want to be highlighted. Then press the pre (Wp-Syntax) button in the editor and enter the coding language. That’s all! This plug-in will do the rest for you!

Please click on the image to see enlarged version

 

 

How to use WP- Syntax

PS: WP-Syntax Editor Integration Plugin requires WP-Syntax plug-in to work. It is just an extension for WP-Syntax plug-in to add a pre (Wp-Syntax) button in visual and HTML editor.

Congratulations! you have done it.

Follow us on twitter @OfficialTeronga . For regular post updates subscribe to our Feed Burner Newsletter. Give your feedback by commenting.

Mizanur Rahaman Mizan

4 responses to “How to display code in WordPress posts”