2007/08/20

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
<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/&nbsp;&nbsp;&nbsp;/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.

No comments: