Solarized Code Highlighting for Scribble theme

Confession: I am addicted to the Solarized colour palette.

Here’s how to integrate Solarized into Scribble theme (the currently used Jekyll theme at time of writing).

The following are prerequisites:

First up, let’s back-up the current stylesheet defining the colours for code blocks. Note that the file syntax.css is automatically detected and required by Pygments. If you want to use a different filename, define it in _config.yml.

mv stylesheets/syntax.css stylesheets/syntax-scribble.css

Now create a new syntax.css file and paste in the CSS styles with respect to the Solarized colour scheme: Dark and Light, courtesy of Nicolas Hery, or use one of the following commands.

# Solarized Dark
curl https://gist.github.com/nicolashery/5765395/raw/91ae32653fec817d26ba322cbe9d62192b07b851/solarized-dark.css -o stylesheets/syntax.css

# Solarized Light
curl https://gist.github.com/nicolashery/5765395/raw/168ea6851298cfd1d5e062ae742e18657b1c7a72/solarized-light.css -o stylesheets/syntax.css

Next, we need to update the default styles for verbatim text. Within stylesheets/styles.css, update the following, choosing the set of styles depending on whether you chose the Dark or Light scheme.

code {
  /* Dark */
  background: #002b36;
  color: #93a1a1;
  /* Light */
  background: #fdf6e3;
  color: #586e75;
}

As a result, code blocks look awesome when displayed with or without line numbers. However, when we choose to use a table to integrate line numbers, we need to do some extra work. Add the following CSS code to the bottom of styles.css.

.highlighttable {
  width: 100%;
  padding: 0 60px 0 36px !important;
  /* Dark */
  background: #002b36;
  color: #93a1a1;
  /* Light */
  background: #fdf6e3;
  color: #586e75;
}

.highlighttable .linenos {
  width: 24px;
}

.highlighttable pre {
  padding: 10px 0;
  color: #586e75;
  line-height: 1.3em;
}

That should do it! We now have awesome code blocks, syntax highlighted with the help of Pygments and Solarized.

In case you forgot how to declare a code block, here’s a quick recap. There are effectively three basic options when creating a code block.

The first is the default, and displays no line numbers. Replace <lang> with a suitable code language. This is compulsory, otherwise Jekyll will not successfully build due to an error thrown by Pygments.

{% highlight <lang> %}
  // code goes here
{% endhighlight %}

To display line numbers, add the linenos attribute after the language declaration, for example,

{% highlight <lang> linenos %}
  // code goes here
{% endhighlight %}

However, this prevents viewers from easily copying the code by highlighting the text; the line numbers are copied along with the code. To solve this, we specify that the line numbers and code be placed in a table element:

{% highlight <lang> linenos=table %}
  // code goes here
{% endhighlight %}

Our CSS styles above will ensure this last example be displayed correctly.