Jekyll is not beginning line numbers from the first line as they should be

Question

Jekyll is not beginning line numbers from the first line as they should be

My website was put together using Jekyll, specifically with the Beatiful-Jekyll theme. To make syntax highlighting possible, I utilized Rouge. The issue arises when displaying line numbers alongside the code - sometimes they don't align properly or are missing at the beginning or end.

One example where everything is in order can be seen here:

works_fine

In this scenario, the line numbers match up with the code lines but the first and last ones are absent (or the first three and last three).

lines_missing

The final case shows a lack of alignment between line numbers and code lines:

lines_not_aligned

I suspect the issue lies with the linenos tag. My attempt to fix this involved configuring the _config.yml file as follows:

kramdown:
  input: GFM
  syntax_highlighter: rouge

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

Although this setting correctly displays default line numbers, those shown while using {% highlight linenos %} remain problematic.

default_line_numbering_without_linenos

Any guidance on resolving this issue would be greatly appreciated. Thank you.

css jekyll blogs rouge

Answer 1

Answer №1

Although this post is dated, I struggled to find a solution, so here are my discoveries.

In short, disable minifying HTML and use the following liquid code to minify HTML pages below. This method worked for me in Jekyll version 4.0.0.

Update 1.

Upon further investigation, I found that having trailing spaces within code brackets can lead to similar issues.

text
text

The final empty line within the code breaks the pre tags during HTML minification. This occurs when the output HTML is captured and newline characters are converted to
tags, causing the trailing empty line to be lost. (It might work with whitespace instead of an empty line, but I didn't test it)

End update 1.

I faced the same problem. My local server using "jekyll serve" was fine, but Gitlab pages displayed it incorrectly like the examples mentioned. It occurred to me that I usually set "minify_html" to false while working locally, and indeed the issue persisted even when I turned on minify_html to true. I decided to remove jekyll's default minify_html completely and implemented the following code.

Create a new layout - naming doesn't matter.
Add the code snippet below into the new layout.

{%- 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 }}

Visit your existing layouts and add the newly created layout to their front matter as follows:
```
layout: <name of your created layout>
```

This code represents my attempt at optimizing HTML compression, and it seems effective. It excludes anything within <code> tags, ensuring the markdown syntax works properly.

I came up with this idea while striving to replicate the layout from , though I wasn't entirely successful.

Liquid syntax resources:
-
- https://github.com/Shopify/liquid/wiki/Liquid-for-Designers

Answer 2

Although this post is dated, I struggled to find a solution, so here are my discoveries.

In short, disable minifying HTML and use the following liquid code to minify HTML pages below. This method worked for me in Jekyll version 4.0.0.

Update 1.

Upon further investigation, I found that having trailing spaces within code brackets can lead to similar issues.

text
text

The final empty line within the code breaks the pre tags during HTML minification. This occurs when the output HTML is captured and newline characters are converted to
tags, causing the trailing empty line to be lost. (It might work with whitespace instead of an empty line, but I didn't test it)

End update 1.

I faced the same problem. My local server using "jekyll serve" was fine, but Gitlab pages displayed it incorrectly like the examples mentioned. It occurred to me that I usually set "minify_html" to false while working locally, and indeed the issue persisted even when I turned on minify_html to true. I decided to remove jekyll's default minify_html completely and implemented the following code.

Create a new layout - naming doesn't matter.
Add the code snippet below into the new layout.

{%- 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 }}

Visit your existing layouts and add the newly created layout to their front matter as follows:
```
layout: <name of your created layout>
```

This code represents my attempt at optimizing HTML compression, and it seems effective. It excludes anything within <code> tags, ensuring the markdown syntax works properly.

I came up with this idea while striving to replicate the layout from , though I wasn't entirely successful.

Liquid syntax resources:
-
- https://github.com/Shopify/liquid/wiki/Liquid-for-Designers

Answer 3

Answer №2

Encountered a similar situation recently with the following configuration:

kramdown:
  syntax_highlighter_opts:
    block:
      line_numbers: true

The problem arose when there was an empty line at the start of the code block. Although I needed the empty line for proper formatting in the context of discussing code presentation, adding a space on that line resolved the alignment problem.

Answer 4

Encountered a similar situation recently with the following configuration:

kramdown:
  syntax_highlighter_opts:
    block:
      line_numbers: true

The problem arose when there was an empty line at the start of the code block. Although I needed the empty line for proper formatting in the context of discussing code presentation, adding a space on that line resolved the alignment problem.

Answer 5

Answer №3

The issue I encountered was with the misalignment of lines. Upon investigating, I discovered that the culprit was the font-family being used.

It seemed that the code had

font-family: 'Open Sans', sans-serif;

for the text while

font-family: monospace, monospace;

was specified for line numbers.

To resolve this, I had to include the following in a stylesheet:

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

Answer 6

The issue I encountered was with the misalignment of lines. Upon investigating, I discovered that the culprit was the font-family being used.

It seemed that the code had

font-family: 'Open Sans', sans-serif;

for the text while

font-family: monospace, monospace;

was specified for line numbers.

To resolve this, I had to include the following in a stylesheet:

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

Jekyll is not beginning line numbers from the first line as they should be

Answer №1

Answer №2

Answer №3

Similar questions

What steps can be taken to avoid an input with a width of 100% from overflowing?

Instructions on adding a class to a span within a div upon clicking the div

Tips for adjusting content that is 900px wide to fit properly on a mobile screen while maintaining its original width

Is the content within the div longer than the actual div itself when the width is set to 100%?

What is the best way to center a CSS arrow vertically within a table cell?

Limiting the size of textboxes in Twitter Bootstrap

An inclusive CSS-compatible calendar control for ASP.NET

Can a button be connected to both navigate to another webpage and trigger a modal to appear on it simultaneously?

After transitioning to TypeScript, the CRA app is encountering issues loading CSS files compiled by SASS

When adjusting window size, the input shifts towards the left

Methods for altering the color of a div using addEventListener

How can you adjust the width of the Material UI Select component?

Ways to modify the background images in doxygen

Issues with Bootstrap Carousel Fade Transition and Button Controls inoperable

Designing an interactive region using HTML, CSS, and JavaScript

Achieving full width for the elements in a row with Flexbox: A step-by-step guide

Tips for removing borders around a textbox with a background image: When incorporating a background image into a

Restrict the child's height to the remaining space within the parent container

Tips for designing a form action

Bootstrap 3 Implementation of a Clear Navbar