Posting Syntax-Highlighted Code to the Web, Redux
Following up on July's post, I've modified my TextMate 'rawhtml' command so it no longer generates inline <style> sections. (They may work, but AFAIK <style> should appear only in a document's <head>.)
Instead, the command now wraps its output in a div of class SourceCode, and it expects the containing web page to include an appropriate <style> section.
Here's a test to see if this works :) I've added the following CSS to the Bottled Text template HTML:
div.SourceCode { font-family: "Bitstream Vera Sans Mono", "Monaco", monospace; font-size: 12px; width: 500px; overflow: auto; margin: auto; white-space: nowrap; padding: 4px; background-color: #ffffff; border: 1px solid #777788; } div.SourceCode .comment { font-style: italic; color: #888; } div.SourceCode .keyword { font-weight: bold; } div.SourceCode .string { color: #00F; } div.SourceCode .entity { text-decoration: underline; } div.SourceCode .storage { color: #888; } div.SourceCode .support { color: #0b0; } div.SourceCode .constant, div.SourceCode .variable { color: #F0F; }
The "rawhtml" command script now looks like this:
#!/bin/sh cat <HTML perl -pe 's/<\/[^>]+>/<\/span>/g' \ | perl -pe 's/<([^\/.>]+)[^>]*>//g' \ | perl -pe 's/\t/ /g' echo ""
To get a realistic preview in MarsEdit, click the "Edit Template" button in the preview window and add a <style> section to the preview template for your blog. Paste in the CSS above and you're good to go.