# Height mismatch of highlighted line number in syntax highlighting

**URL:** <https://discourse.gohugo.io/t/height-mismatch-of-highlighted-line-number-in-syntax-highlighting/42304>\
**Category:** support\
**Tags:** highlight\
**Created:** [January 8, 2023, 1:17am UTC](https://discourse.gohugo.io/t/height-mismatch-of-highlighted-line-number-in-syntax-highlighting/42304 "2023-01-08T01:17:35Z")\
**Posts on this page:** 1\
**Showing post:** 27

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [January 10, 2023, 5:43am UTC](https://discourse.gohugo.io/t/height-mismatch-of-highlighted-line-number-in-syntax-highlighting/42304/27 "2023-01-10T05:43:47Z")

</div>

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:

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

```

With `lineNumbersInTable = true` …

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/e/7/e7fda095d59c6414d7496c7925c23ad8e12e21e6.png)

> [@will](#):
>
> Perhaps it’s a Chroma bug?

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

> [@will](#):
>
> if that Firefox bug hasn’t been fixed in seven years, then it’ll never be fixed

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.

```css
.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:

```plaintext
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`:

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

```

---

_[View the full topic](https://discourse.gohugo.io/t/height-mismatch-of-highlighted-line-number-in-syntax-highlighting/42304)._