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:
cat <<HTML
<div class="SourceCode">
<div style="white-space: pre; -khtml-line-break: after-white-space;">
HTML
perl -pe 's/<\/[^>]+>/<\/span>/g' \
| perl -pe 's/<([^\/.>]+)[^>]*>/<span class="$1">/g' \
| perl -pe 's/\t/ /g'
echo "</div></div>"
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.