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.