New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Highlighted code block with line-numbers shows too much whitespace #1437

Closed
halirutan opened this Issue Jan 2, 2018 · 4 comments

Comments

Projects
None yet
2 participants
@halirutan

halirutan commented Jan 2, 2018

  • 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

img

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

img

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Jan 2, 2018

Owner

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:

image

ref: jekyll/jekyll#4619 (comment)

Owner

mmistakes commented Jan 2, 2018

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:

image

ref: jekyll/jekyll#4619 (comment)

@halirutan

This comment has been minimized.

Show comment
Hide comment
@halirutan

halirutan Jan 3, 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 commented Jan 3, 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 halirutan closed this Jan 3, 2018

mmistakes added a commit that referenced this issue Jan 3, 2018

Fix line number width in code blocks
Code blocks with short line widths can cause `td.gutter` width to stretch, adding in undesired white space.

Declaring widths on the table's columns fixes #1437

Add `{% highlight linenos %}` examples to test and demo sites.
@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Jan 3, 2018

Owner

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.

image

Owner

mmistakes commented Jan 3, 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.

image

@halirutan

This comment has been minimized.

Show comment
Hide comment
@halirutan

halirutan Jan 3, 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 commented Jan 3, 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment