## 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:

• Jekyll is installed, along with all the required gems.
• Pygments is installed.
• You have a working Jekyll site, using the Scribble theme.
• We are working in the command-line. All paths are relative to the base directory of your blog.

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.

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.

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.

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.

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.