When you want to display code snippets in WordPress you are faced with WordPress going smart on you. Even in [Code] view it will not let you enter code between <code></code> without stripping spaces and what have you. It would be nice if the visual editor did something with code.
There is a WordPress plugin Preserve code formatting However when your blog is hosted by WordPress.com that plugin is of no use.
I’ve heard of people posting code through an image. That seemed a bit bothersome to me. So I played around a bit and the following trick works for me:
Type or copy the code in TextMate and use Create HTML From Selection (With Line Numbers). This will create a completely unreadable (in my eyes) piece of HTML. Paste that (use the code view of WordPress) and voila. Spaces, tabs, <, > are all preserved. As can be seen in the following snippet
1 2 3 AmazonS3 4 StandardStorage 5 TimedStorage-ByteHrs 6 476de2a71aa5a476f84d48e4d61c980-default 7 07/01/07 00:00:00 8 07/02/07 00:00:00 9 220303585632 10 11
Only the <pre class=”textmate-source”> line will be converted to <pre>. I do not know why. The first “interceptor” you will be able to use for your CSS needs is :<span class=”text text_xml”>
I added the following line to CSS:
Oh and do not use the integrated WordPress editor. That can really hurt if you overwrite your text per accident and the automatic save kicks in 😦
I lost my S3 blog because of that. So first I’m going to experiment with TextMate blogging facilities…