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.

Recent Articles

No one ever told you about these 20 Kitchen Tips And Tricks !!!!

there are 20 kitchen tips that  you never heard of which will help you to clean your pans and pots, to maintain your kitchen...

You should eat this 7 foods on a regular basis to get an attractive figure!

If you are interested to make you attractive to others you have to follow some rules. At first you have to control your food...

love your spider plants

Spider Plants or Airplane Plants produce arched green and pale yellow stems that extend to be 12-18 inches long. When less than a year...

You must need these home remedies for healthy long hair.

Long hair is the crowning glory of our looks, both literally and figuratively. Long, gorgeous, and healthy tresses are every girl’s dream. Maintaining long and...

How to cure your Joint pain In A day!

How to cure joint pain Joint pain is one of a common issue among the people, joints are the parts of your body where your...

Related Stories

4 Comments

Comments are closed.

Stay on op - Ge the daily news in your inbox