Display and Highlight Code in your WordPress blog without any plugins

Posted by 24 February, 2010 |

If you have ever tried to add PHP or some other programming code like CSS, HTML etc. in your WordPress blog, you will know what happens, WordPress will run it instead of showing it as code if you put it using HTML editor. There are many WordPress plugins out there to make the job easier but I wanted the functionality of displaying and highlighting code in WordPress posts without having to use any plugins.

WordPress will only show the code properly if characters are used for code elements, see below:

< = &lt;
> = &gt;
/ = &#47;
] = &#93;
[ = &#91;
" = &#34;
' = &#39;

Displaying Code properly without using any Plugin

Its not very simple to use characters instead of the code elements. What you should keep in mind is to always write your post/paste code in Visual mode of the WordPress editor instead of HTML, it will convert the code elements into characters automatically, displaying it correctly within code tags.

Highlighting Code without using any Plugin

Now the code will be shown correctly on your blog but thanks to easy CSS management in WordPress, you can add/edit a few lines of code in your theme’s stylesheet (style.css) to highlight the code so it stands out from rest of the post. Edit your theme’s stylesheet either by FTP or within WordPress Admin area and look for:

code {
font-size:12px;
}

You can edit it to your liking, setting background colour, text colour, border, margin, padding, everything that CSS can do for you. If you have any questions, feel free to ask in comments.

Be Sociable, Share!

No related posts.

Categories : Tutorials,Wordpress Tags : , ,

Comments
March 8, 2010

Very impressive!.

Posted by Grubby
March 14, 2010

Amiable post

Posted by ala23
March 19, 2010

i absolutely enjoy your own writing way, very helpful.
don’t give up and keep writing seeing that it simply very well worth to follow it,
impatient to see more and more of your own content articles, have a good day ;)

Posted by Kalesen
June 3, 2010

Cheers for publishing this it was useful for a paper I am at this time writing for my finals. Thanks

Posted by Gucci Shoes
Leave a comment

(required)

(required)