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.