Code presentation in WordPress posts

I have edited my recent post on Removing unwanted pastes from Stikked. I used the <code> tags to delineate the command line interactions from the descriptive text. However I wanted the code to appear more like quoted text in a Mediawiki instance. My first  thought was to hack the css to make the code tag work how I wish, however whilst searching for help on that I discovered that the <pre> tag gave exactly the effect I required, whilst the code tag remains useful where you might wish to use a fixed width terminal style text in line with your content.

The other advantage of the 'pre' tag is that it will not force a line wrap if you have a long line of code

The only thing that I still had to do was reduce the font size for these two fixed width fonts as 13px looked a bit chunky along side the normal text.

P.S Having written this I found this comprehensive page on the WordPress site http://codex.wordpress.org/Writing_Code_in_Your_Posts

One thought on “Code presentation in WordPress posts

  1. On a possibly tangential note, I found the WP Code Highlight plugin to be very handy. It works with the pre tag to provide syntax highlighting for a number of languages.

    You can play around with the themes a bit, but the result is a block of code that looks very much like a block of code.

Leave a Reply

Your email address will not be published. Required fields are marked *