HTML code blocks with line numbers have 4em extra padding at the end of each line

[bewuethr]

When using pandoc 2.10 / skylighting 0.8.5, code blocks with the .numberLines class generate CSS with

pre.numberSource code > span {
    position: relative;
    left: -4em;
}

for the individual lines of code. The width of the parent element is not affected by this, so there is extra padding at the end of each line, which can cause unnecessary scrollbars.

A minimal example with a dark highlighting style, a narrow body and a white outline to illustrate the problem:

cat <<'EOF' | pandoc -s -t html --highlight-style breezedark
<style>
body { width: 32em; }
pre > code.sourceCode { outline: solid 1px white; }
</style>
```{.numberLines}
This is the first line.
This is a line long enough to cause horizontal scrolling.
This is another, slightly shorter line.
```

```bash
echo "A code block without numberLines is not affected by this.
```
EOF

This is rendered like this:

The .numberLines code block lines are 4em longer than their contents; the Bash code block below, without line numbers, does not have that problem.

Sadly, my CSS-fu isn't strong enough to suggest a CSS solution, let alone anything that involves Haskell.

[jgm]

This isn't a Haskell issue; it's a CSS issue. If someone gives me advice on what to do with the CSS, we can change it.

[bewuethr]

I'm working on improving my CSS knowledge at the moment. If I understand how to solve this before somebody else does, I'll happily make a suggestion.