Highlighted code block with line-numbers shows too much whitespace

[halirutan]

• This is a question about using the theme.
• This is a feature request.
• I believe this to be a bug with the theme.
  • I have updated all gems with bundle update.
  • I have tested locally with bundle exec jekyll build.

---

Environment informations

• Minimal Mistakes version: 4.5.0
• Jekyll version: 3.6.2
• GitHub Pages hosted: no
• Operating system: Linux

---

Using rouge as the highlighter, I believe there is a small glitch when rendering code-blocks with line numbers. Here is how it looks, note the significant whitespace

The sample was created with

{% highlight wl linenos %}
{% raw %}
Module[{},
  Sqrt[2]
  4
]
{% endraw %}
{% endhighlight %}

and this is what Jekyll and Rouge produce:

<figure class="highlight"><pre><code class="language-wl" data-lang="wl"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
</pre></td><td class="code"><pre><span class="bp">Module</span><span class="p">[{}</span><span class="o">,</span><span class="w">
  </span><span class="nb">Sqrt</span><span class="p">[</span><span class="m">2</span><span class="p">]</span><span class="w">
  </span><span class="m">4</span><span class="w">
</span><span class="p">]</span></pre></td></tr></tbody></table></code></pre></figure>

I can set the width of the following to a fixed value, but I'm unable to see how this can be solved in a non-hackish way.

.highlight table td.gutter {
    width: 10px;
    padding-right: 1em;
    color: #bdc1c4;
}

Expected behavior

Something like this

[mmistakes]

Instead of using Jekyll's highlight tag have you tried using GFM triple backticks and enabling line numbers for Kramdowm/Rouge in your _config.yml.

The CSS might be tricky to get sorted as the HTML markup for Jekyll's highlight tag and what Kramdown spits out is different. It's also a bit of a moving target as they've changed it a few times recently.

Adding the following to the kramdown key in your _config.yml will enable line numbering.

kramdown:
  syntax_highlighter_opts:
    block:
      line_numbers: true

Which ends up looking something like this:

ref: jekyll/jekyll#4619 (comment)

[halirutan]

Instead of using Jekyll's highlight tag have you tried using GFM triple backticks

Thanks for the explanation. I noticed as well that Jekyll produces different HTML for different types of code-block fencing. Unfortunately, I generally dislike line-numbers, but every once in a while I need them to refer to a line. Therefore, I don't want to set it globally. Nevertheless, I fixed my branch of mm by specifying the width.

[mmistakes]

I pushed a small update to _sass/minimal-mistakes/syntax.scss that should fix this issue.

During my tests I had code blocks with long line widths, which didn't show the issue. Your example was a good test because it's fairly narrow. As far as I could tell that was causing the .gutter column to stretch to fill in the extra space.

I added some widths using ems just to be more responsive friend vs. pixels.

[halirutan]

That is nice. I missed the calc part but used otherwise the same fix. I'm going to report another issue that caught my eye.