How to Show Code in a Wordpress Post
I’ve had a number of people email me this past week and ask how I got code to show up so nicely in my post about a Fisheye Menu Script. The standard way is to use the <code> HTML tags. Unfortunately, even if you don’t use a WYSIWYG HTML editor, Wordpress still tries to clean up your code and seems to ignore the <code> tags. So how can you get around this?
There is an easy way. After looking for 30 minutes one day on the best way to effectivly publish code on my blog, here it is. And it’s actually remarkably simple.
First, download a plugin called “Preserve Code Formatting” by coffe2code here. Refer to the plugin’s page for installation or technical help. Now any time you need to show code (HTML, CSS, javascript, etc) simply enclose your code as the following:
Your Code hereIt now will work like a charm.
This may be all you need. However, for those looking to add several lines of code, you are going to need a way to offset the code from the rest of your text. I use some simple CSS that makes it look good. To use it, paste the following code in your theme stylesheet:
Code:
.code {
width: 475px;
height: auto;
background-color: #fafad2;
color: #000000;
font-size: 12px;
text-align: left;
border: 1px dashed #000000;
overflow: auto;
padding: 6px 3px 6px 3px;
white-space: nowrap;
}
This code creates a simple scrollable box around your code. You can edit this CSS code to your liking. Make sure to change the width and background color to match your blog’s theme. After pasting this code in your stylesheet, simply surround your code (including the <code> tags) by <div class="code"> </div> . A box that requires scrolling would look like this:
Code:
This is a code text box that will probably require some scrolling. This would be a long link or javascript code, for example.
And that’s it. Now your are set up to share code for the world to see!
Did you find and error or improvement for this code? Comment below or let me know.
Useful Articles
This article was written by John Kolbert on October 14, 2007 and filed as Useful Tools. Get the latest articles by subscribing to the RSS feed. This article, including images and attachments, is property of John Kolbert and is not to be republished or translated without prior written permission.
Pretty cool and very easy, thanks for the tip John
Hey John,
I am using a code highlighter, where you can say something like:
<pre lang=”java”>
java code here..
</pre>
And it will also put it in a scrollable (if needed box), and highlight it as well, which is quite nice :)
According to the plugin readme, plugin lives here: http://ideathinking.com/blog/?p=6
hope it will help somebody ;)
P.S. BTW, when I am leaving comments here, I cannot press TAB key + I have to use &+lt and &+gt for tags. Just to let you know.
Toly’s last blog post..How to Build DIGG in Ruby On Rails (Free Book)
Hey John, just noticed that even when using the code markings wordpress will tend to get rid of the formatting. It works perfectly the first time around, but if you return to the page because you noticed a typo, or wanted to add something else, you will have to physically delete what wordpress changed the code tags into, and retype the coding so that it will show up.
@James Make sure if you are using a WYSIWYG (visual) HTML editor that you are in code edit mode. If you ender the code tags in the visual portion, it will change them. I actually don’t even use a WYSIWYG editor for my posts because I found it tended to alter my code more then I liked.
thank you