KnobsLeversButtons

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…