Code blocks look ugly with line numbers enabled for Kramdown

[iBug]

Environment

• Minimal Mistakes version: 4.17.2
• Ruby gem or remote theme version: 4.17.2
• Jekyll version: 3.8.6
• Git repository URL: N/A
• GitHub Pages hosted (if yes provide URL to site): https://risc-v.ibugone.com/toolchain/c/ (Example page with reproducible behavior, will revert after issue solved or a few months in the future)

Steps to reproduce the behavior

Create a code block like this:

```
code
```

Set this key in _config.yml:

kramdown:
  syntax_highlighter: rouge
  syntax_highlighter_opts:
    block:
      line_numbers: true

And render the site

It ends up looking like this:

I tried to fix this on my own but failed.

Potentially useful resources:

• An OK page that I created on my own: https://classic.ibugone.com/blog/2019/03/first-touch-with-awk.html. That theme was modded from Cayman and before my patch it looked almost the same as this erroneous layout in MM.
• My source code that fixed the problem in Cayman theme: https://github.com/iBug/website-classic/blob/master/_sass/main-content.scss#L77-L133

[mmistakes]

Not sure how to handle this one. The HTML Jekyll produces for syntax highlighting with line numbers enabled via Kramdown is different from that of what the highlight tag outputs.

Look at this sample post and you can see line numbering via the highlight looks good.

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

If I alter the CSS for Kramdown flag output it breaks the highlight tag styling and vice versa. There’s an issue on Jekyll/Jekyll proposing to harmonize the two, but I don’t think there’s been movement on it for some time.

[mmistakes]

This was an issue awhile back that I believe I fixed. Not able to check the HTML now but perhaps Kramdown enabled line numbering changed their markup again.

#1467

[iBug]

OK thanks I'll use Jekyll {% highlight %} tag for now. It at least offers per-block line number control.