New feature - Coderay

After some behind-the-scenes drama, syntax highlighting is finnaly running!

This blerg began in a Wandows environment, meaning the default Pygments syntax engine wouldn’t work¹. Now that work is no done on a Mac I could finally enable pygments and have all the features that Jekyll has, right?

pygments : true

Never has one line caused so much grief. Pygments wouldn’t work with liquid’s highlight, so that had to get replaced with codeblocks, which I couldn’t get working working. After a while a fell into this fun loop:

1. code highlighting doesn’t work
2. fix that but brakes a key markdown feature
3. fix that but break another part of the site
4. fix that, goto 1

So the idea of better syntax highlighting was abandoned untill I stumbled across Kramdown and its Coderay support.

Coderay

Here’s what the old codeblocks looked like: single color blocks with colors used to show the languages.

It was OK and it did the job. But the below is more readable and just looks awesome.

var buttonText = $(".tabContent h2").text();

$("ul.tabs").insert("<li><button class='tab'>" + buttonText + "</button></li>" );

$("ul.tabs").find(".tab").click(function(){
  $(this).parent().toggleClass("active");
  // ...
});

So long story short after weeks of messing around Coderay is now running and markdown has been updated. Shiny!