HTML code blocks with line numbers have 4em extra padding at the end of each line
- Dominant language
- Haskell
- Stars
- 218
- Forks
- 67
- PR merge metrics
- No merged PRs in 30d
Description
When using pandoc 2.10 / skylighting 0.8.5, code blocks with the `.numberLines` class generate CSS with
```css
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:
~~~bash
cat <<'EOF' | pandoc -s -t html --highlight-style breezedark
body { width: 32em; }
pre > code.sourceCode { outline: solid 1px white; }
```{.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.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.