Making This Blog: Pt 1. Pretty Code Snippets

Well, I’m giving this whole static-site Jekyll, Octopress thing a go again, hosting it on Github Pages and all that.

Of course, that means customization. As I imagine I’ll have a lot of code snippets going up, pretty syntax highlighting would be a good place to start.

Base16

I’ve been digging the base16 colour scheme, and I’ve always been a fan of Molokai or Monokai or whatever it is, so I decided to try to use the Monokai variant.

As you can see, I got it working… sort of.

require "gem"

string = "base16"
symbol = :base16
fixnum = 0
float  = 0.00
array  = Array.new
array  = ['chris', 85]
hash   = {"test" => "test"}
regexp = /[abc]/

# This is a comment
class Person

  attr_accessor :name

  def initialize(attributes = {})
    @name = attributes[:name]
  end

  def self.greet
    "hello"
  end
end

person1 = Person.new(:name => "Chris")
print Person::greet, " ", person1.name, "\n"
puts "another #{Person::greet} #{person1.name}"

Eh… pretty close, I’d say.

Sassifying

Fortunately, there’s the base16 Builder projet, which creates a tonne of different variations for a tonne of different applications. One of those is Rouge, which is what this uses to highlight all the pretty syntax above. The only problem, however, is that the builder creates ruby-based plugins to be used directly with the generator, and not some sort of stylesheet that is compatible with the output.

Pygments to the Rescue

Luckily, Rouge is compatible with Pygments stylesheets, and the builder creates Pygments-compatible stylesheets! Huzzah! There’s just one problem. The style sheet is plain, old CSS, which is kind of a pain to tweak. Like… look at this:

/*

    Name:       Base16 Monokai Dark
    Author:     Wimer Hazenberg (http://www.monokai.nl)

    Pygments template by Jan T. Sott (https://github.com/idleberg)
    Created with Base16 Builder by Chris Kempson (https://github.com/chriskempson/base16-builder)

*/
.syntax .hll { background-color: #49483e }
.syntax  { background: #272822; color: #f9f8f5 }
.syntax .c { color: #75715e } /* Comment */
.syntax .err { color: #f92672 } /* Error */
.syntax .k { color: #ae81ff } /* Keyword */
.syntax .l { color: #fd971f } /* Literal */
.syntax .n { color: #f9f8f5 } /* Name */
.syntax .o { color: #a1efe4 } /* Operator */
.syntax .p { color: #f9f8f5 } /* Punctuation */
.syntax .cm { color: #75715e } /* Comment.Multiline */
.syntax .cp { color: #75715e } /* Comment.Preproc */
.syntax .c1 { color: #75715e } /* Comment.Single */
/* And so on */

Well… step 1 is to clean up all the selectors into sass’ nested selectors:

.highlight  {
  background: #272822;
  color: #f9f8f5
 .hll { background-color: #49483e }
 .c { color: #75715e } /* Comment */
 .err { color: #f92672 } /* Error */
 .k { color: #ae81ff } /* Keyword */
 .l { color: #fd971f } /* Literal */
 .n { color: #f9f8f5 } /* Name */
 .o { color: #a1efe4 } /* Operator */
 .p { color: #f9f8f5 } /* Punctuation */
 .cm { color: #75715e } /* Comment.Multiline */
 .cp { color: #75715e } /* Comment.Preproc */
 .c1 { color: #75715e } /* Comment.Single */
 /* And so on */
 }

Step 2: Varibles! What if I feel like changing which base16 variant I use?

$base00: #272822;
$base01: #383830;
$base02: #49483E;
$base03: #75715E;
$base04: #A59F85;
$base05: #F8F8F2;
$base06: #F5F4F1;
$base07: #F9F8F5;
$base08: #F92672;
$base09: #FD971F;
$base0A: #F4BF75;
$base0B: #A6E22E;
$base0C: #A1EFE4;
$base0D: #66D9EF;
$base0E: #AE81FF;
$base0F: #CC6633;

.highlight {
  background: $base00;
  color: $base07;

  .hll { background-color: $base02 }
  .c { color: $base03 } /* Comment */
  .err { color: $base08 } /* Error */
  .k { color: $base0E } /* Keyword */
  .l { color: $base09 } /* Literal */
  .n { color: $base07 } /* Name */
  .o { color: $base0C } /* Operator */
  /* And so on */
}

Cool, that works. Too bad the default liquid tags kind of suck. Thankfully, Octopress has a thing for that. We do have to make one slight tweak to our sass though.

diff --git a/_sass/_syntax-highlighting.scss b/_sass/_syntax-highlighting.scss
index 11c3c98..20b9d7d 100644
--- a/_sass/_syntax-highlighting.scss
+++ b/_sass/_syntax-highlighting.scss
@@ -24,7 +24,7 @@ $base0D: #66D9EF;
 $base0E: #AE81FF;
 $base0F: #CC6633;

-.highlight {
+.code-highlight {
   background: $base00;
   color: $base07;

And we’re done! Part 2 is going to involve finding some nice theme to go with the new, pretty code. The rest of this blog will be me rambling about making the things that I made. I hope you enjoy.