One of the really cool feature of a Jekyll blog generator is the in-built support for syntax highlighting in code blocks. The styling of the code blocks is really good with the default settings except for one thing, line numbers. In this article, we are going to fix just that.
An ordinary code block without line numbers can be made by surrounding your code between
highlight liquid tag. You can also specify the language of the code block as follows.
The code block created will look something like this.
To add line numbers to this code block. Just add the keyword
linenos to the highlight tag. If the language of the code is
After adding the line numbers, the code block will look something like this.
Code Block with line numbers
This is pretty bad. The line numbers and the code does not have any division and the colour of the line numbers confuses it with the code. Also, when we select the code, the line numbers are also selected.
We can fix the above problems with a couple of tweaks. We can modify the looks of the line numbers by changing the property of the class
.lineno. We add this class to the
_syntax-highlighting.scss file in our Jekyll project.
First of all, we will change its colour to something more subtle. Then we add some padding and border.
To prevent the line numbers from being selected when we select the code block, we need to set the
user-select property of
.lineno. With vendor prefixes, it looks like this.
.linenos class in
_syntax-highlighting.scss will now look like this.
By tweaking the
.lineno class, we can add better looking line numbers in Jekyll code blocks. You can also prevent the line numbers from being selected while selecting the code.