Octopress and the Twilight Color Scheme

| Comments

Well, I am a developer (a that-yellow-is-not-yellowy-enough developer) so the first thing I tried to do with my new blog was to see how code looked like in it. Octopress uses two default themes from Solarized; a dark one and a light one (image to the right).

I tried the dark one on a snippet of Ruby/Rails and I got this:

1
2
3
4
5
6
7
8
9
10
11
12

class CookieMonster
  field :cookies, type: Integer

  def eat_cookies(number_of_cookies, cookie_flavor)
    if self.cookies < number_of_cookies
      raise "You don't have enough cookies!"
    end
    puts "You are going to eat #{number_of_cookies} #{cookie_flavor} cookies"
    self.cookies -= number_of_cookies
    self.save!
  end
end

Ouch! So. Much. Blue.

When I started web development, I worked on Vim using the Twilight color scheme. Then, I switched to TextMate using the Twilight color scheme. Now, I work on Sublime Text 2 using… the Twilight color scheme. I like it so much that I even pimped my Eclipse at work (I write software in C++) for my code to look like the Twilight color scheme. The next natural step was to find a way to have code snippets inside my blog with the same colors I love and use every day.

For those of you that don’t know what Twilight looks like, here’s the same code snippet using its colors:

1
2
3
4
5
6
7
8
9
10
11
12

class CookieMonster
  field :cookies, type: Integer
  
  def eat_cookies(number_of_cookies, cookie_flavor)
    if self.cookies < number_of_cookies
      raise "You don't have enough cookies!"
    end
    puts "You are going to eat #{number_of_cookies} #{cookie_flavor} cookies"
    self.cookies -= number_of_cookies
    self.save!
  end
end

Wow, I feel much better already. Phew!

Getting to the dirty business

To install Twilight color scheme in Octopress, I followed what chico explained in this blog post, with a few tweaks. First of all, you have to install kramdown and CodeRay by adding the following lines to your Gemfile:

1
2

gem 'kramdown'
gem 'coderay'

Then, change your _config.yml to use kramdown:

1
2
3
4
5
6

markdown: kramdown
kramdown:
  use_coderay: true
  coderay:
    coderay_line_numbers: table
    coderay_css: class

CodeRay accepts different line number styles: table, inline, list or nil. The difference between them is mostly about the background we use for the CodeRay.line-numbers class in our css:

Nil Inline / list Table


Tweaking the scss

To use our own color scheme, we have to add a file sass/custom/_coderay.scss defining the color scheme and include it by adding the following line to sass/custom/_styles.scss:

1

@import "custom/coderay";

TextMate’s Twilight css for CodeRay is available thanks to russbrooks in this gist. If you want GitHub’s theme, you can get it right here. What’s great about having your own color scheme with CodeRay is that you can change around a hundred different colors, whereas Solarized only works with eight accent colors (you’ll see later that I changed the .CodeRay .constant color in my custom scss file).

Next, we have to tweak the scss in order to have the right background colors and nice table line numbers. Let’s add background and text colors in the sass/custom/_colors.scss file:

1
2
3

$code-bg: #141414;
$code-color: #F8F8F8;
$line-nb-bg: #404040;

Our custom scss modifications will go in the sass/custom/_styles.scss file. This file is read last, so anything in it will override definitions inside _coderay.scss (or any other scss file).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

.CodeRay {
  background-color: $code-bg;
  padding: 0px;
  pre {
    padding: 5px 0px 5px 10px;
  }
}

.CodeRay pre, .CodeRay .highlight, .CodeRay .gist-highlight  {
  background-color: $code-bg;
  border: 0px;
  color: #F8F8F8;
  margin-bottom: 0px;
}

// Nice line numbers
table.CodeRay td {
  padding: 0px;
}
.CodeRay .line-numbers, .CodeRay .no {
  background-color: $line-nb-bg;
  padding-right: 1em;
  pre {
      background-color: $line-nb-bg;
      border: 0px;
      margin: 0px;
  }
}
.CodeRay .line { background-color: $line-nb-bg }
.CodeRay span.line-numbers { padding: 0px 10px 0px 0px }

// As in Sublime editor
// Violet for constants ("Rails")
.CodeRay .constant { color: #9B859D; }
// Blue for predefined-constants ("self")
.CodeRay .predefined-constant { color: #7587A6; font-weight: normal  }

Adding code snippets

There are several ways to add code snippets now we have kramdown installed and customized.

Pygments

What’s great about this color scheme customization is that you can still use the default Solarized themes if you want, as I did in the beginning of this post, with the usual codeblock syntax.

On the other side, you won’t be able to use the triple-backtick code blocks any more.

kramdown

To add a kramdown code block, you can do the following:

1
2
3
4

    def hello
      puts "Hello!"
    end
{:lang="ruby"}

You can also use the single backtick syntax for inline code:

1

`def hello`{:lang="ruby"}

And voilà! You have your own color scheme, customizable at will.

Comments