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.
- Download plug-in here.
- Upload wp-syntax.zip to your WordPress plugins directory, usually
wp-content/plugins/and unzip the file. It will create awp-content/plugins/wp-syntax/directory. - Activate the plugin through the ‘Plugins’ menu in WordPress.
- Create a post/page that contains a code snippet following the proper usage syntax.
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!
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.
anika
and is it correct … I don’t know why i can’t able to use this properly
Hi Mizanur.. this code insertion tutorial helped me much.. Thanks for taking time to prepare this useful stuff.
am a newbie to WordPress, thanks fro this tutorial
nice tutorial, thanks for sharing