Display and Highlight Code in your WordPress blog without any plugins

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.

No related posts.