Displaying TextMate code in your WordPress blog
It can be a little tricky to get code in your Wordpress blog to look as good as it does in TextMate. I began with this article as a guide but departed form it in a couple of places. The following steps describe how I set up code formatting on this blog.
First, install and activate the wpuntexturize Wordpress plugin to suppress curly quote transformations.
In TextMate select the following menu option: Bundles > Textmate > Create CSS from current theme.
Run Edit > Find on the resulting document and replace all instances of '.yourthemename' (eg. '.cobalt') with an empty string (").
Save the resulting file as mate.css inside your WP theme folder and upload to your site.
Modify the header.php file for your theme to include the mate.css file. Add a line beneath the first stylesheet link so that the first two stylesheet links look like this: (substitute the example values here with your own site url and theme name)
To include some code in a blog post, select the code portion in TextMate and then choose Bundles > TextMate > Create HTML from selection (don't use the line numbers option, it makes it fiddly for people to copy and paste your code).
Copy the contents of the generated file and paste them into the Code view of your WP post.
I've noticed that not all code inserted in this way will be faithfully highlighted as it is in TextMate, but most of it is.
Trackbacks
Use this link to trackback from your own site.
Thanks for this! I was looking for precisely this tip and your page was one of the first to appear on google. Wondering about one thing - why remove the ".cobalt"? Seems a bit strange since TextMate puts the .cobalt in the HTML it outputs anyway.
Also, you could probably skip the "generate CSS" stage since the CSS is included as part of the generated HTML, so you could just cut and paste it from there.
Finally, I found that the default padding/margins (0/0) in the textmate CSS was a bit stingy, so I added some padding - looks much easier on the eyes.
Daniel
You're welcome!
Removing '.cobalt' from the CSS file just means that the styles defined by TextMate will apply to all pre and code blocks in your blog (not just the ones you export from TM). It's an optional step.
As far as i can tell there are no style rules generated when you generate HTML from TextMate so it looks as though you still need to take the extra step of exporting the CSS.
Yes, extra padding makes things much prettier!
[…] If you use TextMate in Mac OSX, BitButter has a great post on how to display your TextMate code (formatting included) in WordPress. […]
[…] was gratifying to get a lot from WordPress¸ Horde and SquirrelMail tutorials available. I enjoyed Displaying TextMate code in your WordPress blog. www.freeadvertisingforum.com has a splendid piece. www.freeadvertisingforum.com was sound today. I […]