jgm / jgm/skylighting

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

Open
#104 2 comments 0 reactions 0 assignees View on GitHub
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:

![image](https://user-images.githubusercontent.com/8521043/87867746-3a460e80-c95e-11ea-959a-2e2d66e885ba.png)

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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.