Height mismatch of highlighted line number in syntax highlighting

support
27

I thought this Bootstrap conflict was similar to the last one or two that we had to work around (RTL and something else I can’t remember).

It is not, so I am going to eat some crow on this one.

The only thing that Bootstrap added to this was a line height greater than 1. So, take Bootstrap out of the mix, use inline styles (the default), and do:

<style>
  body {
    line-height: 2;
  }
</style>

With lineNumbersInTable = true …

image
image292×197 5.45 KB

Definitely. I apologize for the noise. See:
https://github.com/alecthomas/chroma/issues/722

Yeah, I’m not holding my breath on that one.

This is the best I can come up with to normalize the appearance and behavior regardless of whether or not lineNumbersInTable is enabled.

.chroma .lntable .lnt,
.chroma .lntable .hl {
  display: flex;
}

.chroma .lntable .lntd + .lntd  {
  width: 100%;
}

.chroma {
  overflow-x: auto;
  margin: 0;
}

Here’s an example project to reproduce the problem:

git clone --single-branch -b hugo-forum-topic-42304 https://github.com/jmooring/hugo-testing hugo-forum-topic-42304
cd hugo-forum-topic-42304
hugo server

To fix the problem, uncomment this line in assets/css/main.css:

@import "./code-blocks.css";