Minimal-mistakes: Highlighted code block with line-numbers shows too much whitespace
- [ ] This is a question about using the theme.
- [ ] This is a feature request.
- [x] I believe this to be a bug with the theme.
- [ ] I have updated all gems with
bundle update. - [x] I have tested locally with
bundle exec jekyll build.
- [ ] I have updated all gems with
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
halirutan
All 4 comments
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: https://github.com/jekyll/jekyll/issues/4619#issuecomment-354445278
mmistakes
on 2 Jan 2018
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.
halirutan
on 3 Jan 2018
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.
mmistakes
on 3 Jan 2018
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.
halirutan
on 3 Jan 2018
Related issues
adinriv
·
3Comments
m1evankaiser
·
3Comments
themoralpanda
·
4Comments
r614
·
3Comments
wAuner
·
4Comments
Most helpful comment
Instead of using Jekyll's
highlighttag 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
highlighttag 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
kramdownkey in your _config.yml will enable line numbering.Which ends up looking something like this:
ref: https://github.com/jekyll/jekyll/issues/4619#issuecomment-354445278