Many blogs (including this one) display code snippets as part of their content. This is done to show the relevant code in tutorials etc.
This is however something that could be very problematic in a WordPress blog. First of all most browsers will not simply display the code, it will attempt to run it. This does of course lead to all sorts of unwanted results.
PHP, HTML or CSS could have very long lines of code. These lines cannot just be split into separate lines to make them fit the content. If this is done the person who then copies and pastes such code, will end up with all sorts of problems.
I have tried quite a few plugins to solve this problem but none of them actually did what I wanted them to do. Some would display the code perfectly on the blog but mess it up totally in the feed. Others got it the other way around. I had to find a way of solving this problem without using plugins.
Lines of code too long
In CSS, PHP and HTML long lines of code can be separated into multiple lines if the line breaks are inserted in the correct place. I often publish big chunks of code and putting in line breaks by hand would not be the productive thing to do. To overcome this I had to find a way to allow the code bits to scroll in the articles as well as in the feed.
HTML provides 2 tags for use when displaying code. These are the ‘pre’ and ‘code’ tags. To obtain the desired scrolling effect for the code I changed my stylesheet to include the following:
pre, code{
overflow:auto;
font-size:1em;
background:#f1f1f1;
color:#555;
border:1px solid #ddd;padding:10px;
}
This CSS styles the code I want to show so that it stands out from the rest of the content and it allows the entire box to scroll horizontally should it be necessary.
Google Reader, on the other hand does not read my stylesheet but fortunately the problem is sorted out there as well. If I add long lines of code you will be able to scroll them on the blog as well as in the feed. In the feed, you simply click, hold the mouse button down and move the mouse to the right. The entire page in Google Reader will scroll to the right allowing you to read the missing parts. Should you not want to use the mouse in this way Google Reader also adds a horizontal scrollbar at the bottom of the article.
Browser attempting to run code
There is only one way to overcome this problem and that is to use HTML Entities. Changing the code into these entities allows it to be displayed correctly and the browser will not try and run the code.
Let me use an example to show just what the problem is. Let’s say I want to show the code on how to insert an image. If I use the normal code I will get the actual picture shown in my newly styled box.
If I change the code into HTML entities, the code itself will now be shown in the box. The following image should show exactly what I am talking about.
This might not be the best way of showing code but it works. This way I can now show code both on the blog and in the feed. Until I or someone else can come up with a better method, this is the way I will be going.
What about you, have you ever had to struggle with the problem of wanting to show code in your articles? Maybe you know of a better or easier way of overcoming this problem.
Till next time. 
If you have found this article useful, please consider subscribing to the RSS feed. You could do this via your favourite feed reader or via Email.
Many of the WordPress hacks, tips and bits of advice provided on this blog, include code snippets. If you are making use of any code provided here kindly take note that I cannot be held responsible for anything that might go wrong on your blog because of the new code. Before making any changes to your files please ensure that these files have been adequately backed-up.
If you are passionate about WordPress and you are interested in guest posting for Nice2All, please contact me.
Really this is the issue i faced when i shared image alignment correction code.
Most of the people use Images to share the code
Thanks for sharing this lyndi.
The problem with images is that the reader cannot copy the code to be able to paste it elsewhere. Thanks for dropping in.
I remember using a plug-in so that I can write and display code properly on my WordPress blog.
By the way, nice new theme! Yes, it’s been a while that I visit your blog
Hi Michael, there are a few plugins that do this job. If you use these just check to see what they do with the code in the feed.
Lyndi, Thanks for this post. Do you remember, i mailed you for help few days back when i was composing “Threaded Comments” post.
I still have one problem. Can you help me in this.
Lets take your post example. After you convert the img src code to HTML enties and save the post. If you open the post again and do some editing and save it again. Does this html entities part gets corrupted.
It happens for me. When i try to modify the post(not the html entities part) and try to save it. That html entities get corrupted some how.
A very good point. This is the difference between using the Visual and HTML views in the WordPress editor. When you work with entities the code always has to be entered in HTML view. I missed this point because it is for this very reason that I have the Visual View turned off on this blog, I cannot get in there even if I wanted to.
Thanks. But can i know how you have turned off the visual view for this blog?
You’ve got me. I just cannot remember, will go and find out and let you know. Maybe this is a post that should be written. Check out how my editor appears in the back-end.
Found it, just follow the following in your back-end:
Users; Your Profile; Personal Options; Disable the visual editor when writing.
Different authors on the same blog can thus have different settings.
Lyndi,
disabling the visual editor is good when we want to display code as html entities and in future we can modify the post without corruption.
Am i right?
Exactly right.
Hi Lyndi
Came across your blog recently and have found some useful Wordpress tips.
Another thing that Wordpress does to code is it automatically changes normal quotes into “smart quotes” (i.e. curly quotes). If people copy and paste code it then often doesn’t work because of the quotes changing. You can fix this by removing the wptexturise()function in “functions.php”:
More info on this here:
http://www.wprecipes.com/how-to-get-rid-of-curly-quotes-in-your-wordpress-blog
Great tip, thanks Justin. I have just added this to my functions.php, every little bit helps.
I always wondered how to add code in the posts without the browser running it , I used to add images , thanks for the very informative post
If showing code is something that you do not often do then I suppose using images is a way out.
Nice idea !! there was some wordpress plugin for same, don’t remember the name. any ways thanks.
Wish you a happy new year!
Thanks, and I hope you have a happy new year as well.
Yes. I had several issues on this before. Not knowing what to do, I just simply removed the code.
BTW Lyndi, in your previous post, I see that the code is running out of this Text Box and getting over to the sidebar. That makes a horizontal scroll bar to appear. I noticed this in Firefox.
I have checked but cannot see anything wrong. I assume you are talking about the code I placed in a comment. Could you let me know what version of Firefox you were using.
I have been uploading a lot of changes the last few days, maybe you just caught me at the wrong time.
Thanks for letting me know.
Yes. You are correct. May be you were still working when I noticed it. I don’t see it anylonger.
As long as the problem is gone, I am happy. Thanks for letting me know. It helps a lot when readers bring a blogger’s attention to potential problems.
Theres a small plugin that will autoescape code for you and works perfectly:
http://priyadi.net/archives/2005/09/27/wordpress-plugin-code-autoescape/
And for a comprehensive guide on plugins that will display code correctly:
http://www.cagintranet.com/archive/the-definitive-guide-on-wordpress-syntax-highligher-plugins/
I use codeautoescape and syntaxhighlighter-plus with some minor css changes and it works perfectly.
Cheers
e
Thanks for the visit and for the links. I found that ’syntax highlighter’ does not scroll the code in the feed. Will investigate the other.
You’re very welcome. I have not actually tried Google Syntax Highlighter for WP, the one i use is Syntax Highlighter Plus, which does scroll, and also has a handy copy to clipboard button. The reviewer prefers WP-Chili for css reasons although he rates Syntax Highlighter Plus higher, unfortunately i could not get the WP-Chili plugin to work, which is a shame. I tried a lot of combinations, used to use the page at Postable http://www.elliotswan.com/postable/ to escape code, and tried a fair few of the plugs on the list and all of them gave me some sort of problem because of how they related to each other and the WordPress built in code ‘cleaning’ funtions. However, the combination of autoescape and SH+ is just about perfect, and it wont break when you switch from graphical to code input using TinyMCE. Hope it works for you.
Thanks Daiv. I will get back to you regarding your offer when I am not so snowed under with work.