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

Creating a full-width tab card with Bootstrap-Vue: A step-by-step guide

Always take the lead with the first image in navigation

Space within a series of photographs

Tips on maintaining the Parent menu in a hovered state when the mouse is over the child menu within a Dropdown Menu

Is there a way to incorporate background images into the <option> tags within a <select> dropdown menu?

Resolution for Reflected Diagonal Backdrop Design

Tips for showcasing the latest Google Map InfoWindows above previous ones

Ensuring Equal Padding on Both Sides of a Div by Setting its Width

Transform a <td> into a table-row (<tr>) nested within a parent <tr> inside an umbrella structure

I am attempting to create a footer with a set size, but encountering an issue

Mastering the use of SVG icons in Angular 4+: A comprehensive guide

Positioning html images to overlap each other without losing the ability to click

Modify the color of the footer area and eliminate any underlines present

Placement of Buttons Inside a Division Tag

Creating Sleek Tables - comparing the benefits of using table-layout:fixed versus setting individual td-width to

Updating the Hero Image

Missing ghost image appears when you drag and drop the file

Creating a captivating animation for a social media like button with CSS

Creating a Drop-down Menu Item using React Material UI

Creating a navigation bar in React using react-scroll