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

Syntax highlighting - inconsistent line number spacing #1467

Closed
MV10 opened this Issue Jan 12, 2018 · 5 comments

Comments

Projects
None yet
2 participants
@MV10
Contributor

MV10 commented Jan 12, 2018

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:

image

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

image

I see nothing unusual in the markdown:

image

image

@mmistakes

This comment has been minimized.

Owner

mmistakes commented Jan 12, 2018

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

This comment has been minimized.

Contributor

MV10 commented Jan 12, 2018

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

This comment has been minimized.

Owner

mmistakes commented Jan 13, 2018

@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

This comment has been minimized.

Contributor

MV10 commented Jan 13, 2018

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

This comment has been minimized.

Owner

mmistakes commented Jan 13, 2018

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

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