Aligning line numbers with code in fenced blocks

support
1

Syntax highlighting works great provided I don’t request line numbers to be shown.
I’m working with hugo-book theme, inserting code with code fences (three backticks),
and controlling line number display either in hugo.toml or in the doc file by
inserting after the language name {linenos = true}.

When line numbers are displayed they are offset vertically from the code lines by a small amount. I have tried many CSS fixes suggested by ChatGPT, but none of them makes any difference.

There is only one scenario where the line numbers are properly aligned: set pygmentsUseClasses = true, and do not supply the corresponding CSS color maps. In this case there is perfect alignment, but there is no color (black and white). The explanation appears to be that only in this case is the same monospace font used for line numbers and code.

Any tips would be appreciated.

Thanks!

2

Could you show example please.
This sound more like theme/CSS thing implemented.

3

Indeed. Core hugo would use chroma for highlighting.

So guess some settings disble that and using a code block render hook

If there are two different fonts that may cause the problem they must come from somewhere.

Or as you said css styling…

4

See https://github.com/alex-shpak/hugo-book/issues/640.

Until the issue is fixed, display the line numbers inline instead of as a table cell.

Also, don’t set pygmentsUseClass in your site config. Configure syntax highlighting using these parameters instead:
https://gohugo.io/getting-started/configuration-markup/#highlight

2 Likes
5

Thanks for posting the issue in hugo-book github repo. I tested with a few other themes and found another where the problem appears: simplog theme. The problem does not appear in several other themes that I tested, so there is something peculiar about these two that leads to the problem.

I’m not sure what you mean by displaying line numbers inline, hl_inline = true?

6

In site configuration:

[markup.highlight]
lineNos = true
lineNumbersInTable = false

Or in markdown (overrides site configuration);

```text {linenos=inline}
aaaa
bbbb
cccc
dddd
```
1 Like
7

Nice, I guess the advantage of using table is that CSS formatting is more flexible.

8

More info here.

1 Like