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.

Trackbacks

Use the following link to trackback from your own site:
http://blog.wilf.me.uk/trackbacks?article_id=syntax-highlighting-for-scribbish&day=03&month=10&year=2006

Comments

Leave a comment

  1. Packagethief about 1 hour later:

    Sweet! I've been longing for this and it's been on my todo list for ages. Thanks for beating me to it. I'll add this to the theme and submit a patch to the typo trac.

  2. James Wilford about 1 hour later:

    Cool - glad you like it! Feel free to adjust the colours - I haven't tested them that much especially with yaml and xml.

  3. Ray 8 months later:

    Thanks. It works great. However if you do two spaces before the comment it won't align properly:

      # a comment
  def method
    puts 'great'
  end

    Instead, you have to do:

    # a comment
  def method
    puts 'great work'
  end

    for it to align with the def. So simply pasting code with comment will look a little bit off

  4. Casino Amerika Führer over 2 years later:

    I recently had a little time to kill, so I set out to create the WordPress version myself and ScribbishWP was born. If you’re a WordPress user in search of an awesome theme then check it out, and give a shout out to Packagethief for a great visual design.

  5. Manchester Escorts over 2 years later:

    However, I'm also using Markdown to format my blog posts. Because Markdown is agnostic about being converted to HTML, it doesn’t have the ability to add HTML-specific things like classes to the generated content. This is a problem with code_highlighter, which uses the class on the tag (like to determine how to highlight the code.

  6. face blog over 3 years later:

    It is cool, I had not know this type of application of CSS until I read this post. Thanks a lot...

  7. face blog over 3 years later:

    It is cool, I had not know this type of application of CSS until I read this post. Thanks a lot...

  8. ShAaNiG over 3 years later:

    I recently had a little time to kill, so I set out to create the WordPress version myself and ScribbishWP was born. If you’re a WordPress user in search of an awesome theme then check it out, and give a shout out to Packagethief for a great visual design.

    Wholesale Brand Name Clothing

  9. ShAaNiG over 3 years later:

    It is cool, I had not know this type of application of CSS until I read this post. Thanks a lot...

    Wholesalers

  10. Bolton Escorts, Manchester over 3 years later:

    Great post and thank you for providing the code in a format that we can copy and paste rather than as an image. Will be getting this implemented asap. Thanks!

Comments