In this post I’ll describe how to add line numbers to a Jekyll 3 site using Rouge. While this should be a simple task, it actually took me a bit of effort to allow code to be copied without line numbers also being copied. Previously I used highlight.js, which was super fast, but I decided to speed things up even more by switching to Rouge and have the syntax highlighting pre-generated as part of the Jekyll static compilation.
Demo
Here’s an example with line numbers:
1
2
3
4
5
6
def fib(n):
a,b = 1,1
for i in range(n-1):
a,b = b,a+b
return a
print fib(5)
Here’s the same example without line numbers:
Notice that selecting and copying the code in both examples does not also copy the line numbers.
Pygments Issues
Initially I added line number with Pygments but had issues copying code within the generated code blocks because it would also copy the line numbers. Here’s an example of the code I used:
I found some documentation describing how adding linenos=table would separate the code from the line numbers. Alas, I had no luck with this either because it jacked up my layout.
Tutorial
The solution that worked for me was switching to Rouge and doing a bit of CSS.
Step 1
If you’re using Jekyll 3 then install Rouge and modify your _config.yml to use Rouge:
Similarly to Pygments, you can highlight code like the following example:
This should generate markup similar to the following:
Step 2
It should hopefully be easier to style the line numbers and code now that they’re separate columns (Pygments kept it as a single pre element with spans intermixed with line numbers and code, which made things tricky.
Specifically for my SCSS/CSS, I used the following code: