Jekyll: line numbers are not starting from first line

Question

I created my website using Jekyll, using Beatiful-Jekyll theme to be precise. For the syntax highlighting I used Rouge. When I don't show line numbers everything work great. When I show line numbers, sometimes the line numbers do not start from the first line of code (same at the end, they stop some lines before the end). And sometimes they are aligned with the code, sometimes not.

Here is an example where everything works fine:

works_fine

Here is an example where line numbers are aligned with line codes but first and last line numbers are missing (in another example, the first three and last three are missing).

lines_missing

And the last example, is where line numbers are not aligned with line codes:

lines_not_aligned

I believe that the problem comes from linenos. To show line numbers I use

{% highlight <language> linenos %}
<code>
{% endhighlight %}

Because I tried the following configuration in the _config.yml file:

kramdown:
  input: GFM
  syntax_highlighter: rouge

  syntax_highlighter_opts:
    css_class: 'highlight'
    span:
      line_numbers: false
    block:
      line_numbers: true
      start_line: 1

And in this case, line numbers shown by default are shown correctly, but line numbers shown using {% highlight linenos %} are still bad.

default_line_numbering_without_linenos

Thanks in advance

Answer 1

I know this is an old post, but I had difficulties finding an answer so I'm posting my findings here.

TL;DR set minify_html to false and minify html pages with liquid below. This worked in Jekyll version 4.0.0

Edit 1.

Further investigation revealed that trailing space inside code brackets also causes similar behaviour.

text
text

the last empty line breaks the pre tags while minifying the html. This happens when the output html is captured and new line characters transformed to br and the whole html string is splitted using the br tag, hence the trailing empty line gets lost. (would probably work with a whitespace instead of just an empty line but I didn't try)

End edit 1.

I was having this exact same issue. My local "jekyll serve" server was fine but Gitlab pages showed it just like the examples in the question. This lead me to realize that I usually set "minify_html" to false while running the site locally and as it turns out the local version also broke when I set minify_html to true. I removed jekyll default minify_html completely and used the code below.

1. Create a new layout, doesn't matter what you call it.
2. paste the following code into it.

{%- capture to-compress -%}
    {{ content }}
{%- endcapture -%}

{%- assign inside-code-block = false -%}
{%- capture to-remove-br -%}
    {%- assign lines = to-compress | newline_to_br | split: '<br />' -%}
    {%- for line in lines -%}

        {%- if line contains "<code>" -%}
            {%- assign inside-code-block = true -%}
        {%- elsif line contains "</code>" -%}
            {%- assign inside-code-block = false -%}
        {%- endif -%}

        {%- if inside-code-block == true -%}
            {{ line }}
        {%- else -%}
            {{ line | lstrip }}
        {%- endif -%}

    {%- endfor -%}
{%- endcapture -%}
{{ to-remove-br }}

3. Go to your existing layouts and add the layout you just created to their front matter as follows:
   layout: <name of the layout you made>

the code is my personal experiment to minify html and it seems to work. The code ignores everything inside <code> tags, so the ``` markdown syntax should work just fine.

I got the idea while trying to get https://jch.penibelst.de/ layout to work (which I wasn't able to do).

Liquid syntax help:
- https://shopify.github.io/liquid/basics/whitespace/
- https://github.com/Shopify/liquid/wiki/Liquid-for-Designers

Answer 2

I just ran into this with these options:

kramdown:
  syntax_highlighter_opts:
    block:
      line_numbers: true

I was using a code block that had an empty line at the beginning. The empty line was the issue. Because I wanted the empty line (for a post about code formatting issues) I found that simply putting a space on the line would fix the alignment issue.

Answer 3

I had the same Problem with the lines not being aligned. For me the fault was actually the font-family.

Somehow the code used font-family: 'Open Sans', sans-serif; while the line numbers used font-family: monospace, monospace;

I had to add this in a style file:

pre * {
  font-family: monospace, monospace;
  font-size: 1em;
}