When you try to display HTML, php or any other code in wordpress blog posts, it executes the code instead of displaying it. So you’ll see the implementation of your code in the post. Even <code> or <tt> tags will not help you to display the exact code in the post. Then how can you display these codes in your posts?
Well, there are so many plug-ins which can help you to display codes in wordpress posts. But I personally use and recommend this plug-in.
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 this plug-in.
- 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. Thats all! This plug-in will do the rest things 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.
Cheers! 
Follow me on twitter @prasannasp
Follow these topics Technology, WordPress
Short Link:
Loading tweets...
6 comments
Skip to comment form ↓
roksa
December 30, 2011 at 5:46 pm (UTC 5.5) Link to this comment
Great write-up, I am regular visitor of one’s site, maintain up the nice operate, and It’s going to be a regular visitor for a lengthy time.
kong chandara
June 30, 2012 at 10:15 pm (UTC 5.5) Link to this comment
I need comment code
anand
August 5, 2012 at 5:22 pm (UTC 5.5) Link to this comment
Was looking into this type of code thx. Nice post
Shrinivas
August 22, 2012 at 7:15 am (UTC 5.5) Link to this comment
This is an interesting post, please write a step-by-step guide to play with database using PHP..
Justin
October 17, 2012 at 11:22 am (UTC 5.5) Link to this comment
Great roundup post with fast and easy to implement examples! I think a lot of WP users will find this super helpful for testing new ways to grow their lists. Looking forward to more great tips.
umashankar
October 17, 2012 at 12:53 pm (UTC 5.5) Link to this comment
This is what I need. Thanks a lot.