Syntax Highlighting for Scribbish 10

Posted by James Wilford Tue, 03 Oct 2006 21:52:00 GMT

So there I was, browsing through various Typo blogs and wondering why mine didn't have syntax highlighting of code blocks like all the cool kids out there. After some googling, and installing the syntax gem, I was puzzled to find that my code was still not being highlighted.

Turns out that, of course, the syntax highlighting relies on the CSS. And the stylesheet supplied with the Scribbish theme doesn't define any styles for the .typocode classes used by the syntax highlighting. So I decided to do something about that.

I started by having a look at the stylesheet for the Azure theme, which does do highlighting. Then I cracked open the /themes/scribbish/stylesheets/content.css file, and added the following:


/* Syntax highlighting */
#content .typocode_ruby .normal {}
#content .typocode_ruby .comment { color: #CCC; font-style: italic; border: none; margin: none; }
#content .typocode_ruby .keyword { color: #C60; font-weight: bold; }
#content .typocode_ruby .method { color: #9FF; }
#content .typocode_ruby .class { color: #074; }
#content .typocode_ruby .module { color: #050; }
#content .typocode_ruby .punct { color: #0D0; font-weight: bold; }
#content .typocode_ruby .symbol { color: #099; }
#content .typocode_ruby .string { color: #C03; }
#content .typocode_ruby .char { color: #F07; }
#content .typocode_ruby .ident { color: #0D0; }
#content .typocode_ruby .constant { color: #07F; }
#content .typocode_ruby .regex { color: #B66; }
#content .typocode_ruby .number { color: #FF0; }
#content .typocode_ruby .attribute { color: #7BB; }
#content .typocode_ruby .global { color: #7FB; }
#content .typocode_ruby .expr { color: #909; }
#content .typocode_ruby .escape { color: #277; }
#content .typocode_xml .normal {}
#content .typocode_xml .namespace { color: #C60; font-weight: bold; }
#content .typocode_xml .tag { color: #9FF; }
#content .typocode_xml .comment { color: #CCC; font-style: italic; border: none; margin: none; }
#content .typocode_xml .punct { color: #0D0; font-weight: bold; }
#content .typocode_xml .string { color: #C03; }
#content .typocode_xml .number { color: #FF0; }
#content .typocode_xml .attribute { color: #BB7; }
#content .typocode_yaml .normal {}
#content .typocode_yaml .document { font-weight: bold; color: #07F; }
#content .typocode_yaml .type { font-weight: bold; color: #C60; }
#content .typocode_yaml .key { color: #C60; }
#content .typocode_yaml .comment { color: #CCC; font-style: italic; border: none; margin: none; }
#content .typocode_yaml .punct { color: #0D0; font-weight: bold; }
#content .typocode_yaml .string { color: #C03; }
#content .typocode_yaml .number { color: #FF0; }
#content .typocode_yaml .time { color: #FF0; }
#content .typocode_yaml .date { color: #FF0; }
#content .typocode_yaml .ref { color: #944; }
#content .typocode_yaml .anchor { color: #944; }

#content .typocode {
  background-color:#eee;
  padding:2px;
  margin:5px;
  margin-left:1em;
  margin-bottom:1em;
}

#content .typocode .lineno {
  text-align: right;
  font-family: monospace;
  padding-right: 1em;
}

And now, by doing something like this...

<typo:code lang="ruby">
# returns date and time from a Time object
  def date_time(input)
    if input 
      input.strftime("%d/%m/%y %H:%M")
    end
  end
</typo:code>

... the result is something like this:

# returns date and time from a Time object
  def date_time(input)
    if input 
      input.strftime("%d/%m/%y %H:%M")
    end
  end

And here's some YAML:


line_item_18:
  order_id: 10
  quantity: 1
  product_id: 2
  id: 18
  unit_price: 6.99
  created_at: 2006-07-15 15:38:55.206595 +01:00

If you'd like to take advantage of this (and why would you be reading this if you wouldn't?), you can download my content.css here:

/themes/scribbish/stylesheets/content.css

Its worth pointing out that after installing the new CSS file in your scribbish directory, you should flip to another theme and back again in order to make Typo pick up the change.