Syntax highlighting - inconsistent line number spacing

[MV10]

I've noticed the horizontal padding between the line numbers and the code varies. What controls this? (I'm not sure if this is controlled by the theme, Jekyll, Liquid, or Ruby, so I'll start at the top!)

Normal-looking spacing:

Crowded spacing (just a couple paragraphs down on the same page):

I see nothing unusual in the markdown:

[mmistakes]

It's controlled via CSS.

You have this live somewhere? The theme styles place a rule to the right of the numbers that I'm not seeing in any of your screenshots.

I have several test examples and haven't seen the numbers get crowded like your examples above.

https://mmistakes.github.io/minimal-mistakes/markup-syntax-highlighting/

[MV10]

Live: https://mcguirev10.com/2018/01/12/persistent-login-with-identityserver.html
Repo: https://github.com/MV10/mv10.github.io

I know it's CSS, I wasn't sure where the styling gets applied. But good call, I meant to ask about the rule, too. I do also have this in the main.scss to add scrolling and some smaller body font sizes:

pre.highlight {
    margin: 0;
    padding: 1em;
    max-height: 500px;
    overflow-y: scroll;
}

Looking at the calculated styles in chrome debug, the normal-looking one ends up with almost twice the PX width of the crowded version.

[mmistakes]

@MV10 The styling is different because the HTML output is different from using {% highlight linenos %}.

If you look at the HTML there are two columns: one for the line numbers the other the actual code. When using {% highlight linenos %} those class names are .gutter and .code

When globally enabling line numbers via Kramdown/Rouge like you have they're .rouge-gutter and .rouge-code, which is why the styling is off.

What probably needs to happen is for me to modify _includes/_syntax.scss slightly to include these .rouge- specific classes. Unless there's a config you can set to tell them to use .gutter and .code instead of the rouge- prefixed ones.

    /* line numbers*/
    &.gutter,
    &.rouge-gutter {
      padding-right: 1em;
      width: 1em;
      color: $base04;
      border-right: 1px solid $base04;
      text-align: right;
    }

    /* code */
    &.code,
    &.rouge-code {
      padding-left: 1em;
    }

[MV10]

Thanks! Adding this to my main.scss did the trick. Pretty much a hack but it'll do until you have time to get around to addressing it.

td.rouge-gutter {
    @extend td.gutter;
}

td.rouge-code {
    @extend td.code;
}

[mmistakes]

I've pushed these changes so once I release the next version of the theme you can remove from your main.scss.