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 <ServiceUsage>
2 <OperationUsage>
3 <ServiceName>AmazonS3</ServiceName>
4 <OperationName>StandardStorage</OperationName>
5 <UsageType>TimedStorage-ByteHrs</UsageType>
6 <Resource>476de2a71aa5a476f84d48e4d61c980-default</Resource>
7 <StartTime>07/01/07 00:00:00</StartTime>
8 <EndTime>07/02/07 00:00:00</EndTime>
9 <UsageValue>220303585632</UsageValue>
10 </OperationUsage>
11 </ServiceUsage>
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:
.text {
font:1.1em 'Courier New', Courier, Fixed;
}
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…