line numbers are not shown in revealjs format - CSS issue

[cderv]

Example:

---
title: "test line number"
theme: white
---

## Line numbered

```{.r .number-lines}
1 + 1
2 + 2
3 + 3
```

If you create a reveal presentation using pandoc -t revealjs -s -o reveal.html test.md, the resulting HTML source will have correctly the <a> tags with number line but there are not shown in the browser.

I believe there is a CSS issue / conflict betwenn the one of Pandoc (skylighting?) and RevealJS.

I think this is similar to #6625 and

.sourceCode {
  overflow: visible
}

is necessary for numberLines to work.

However, in reveal format, it will be overwritten by revealjs CSS rules. Especially

.reveal pre code {
    display: block;
    padding: 5px;
    overflow: auto;
    max-height: 400px;
    word-wrap: normal;
}

which has a higher precedence

I think there should be a specific rule for reveal format

.reveal .sourceCode {
  overflow: visible
}

I don't know if it should be in Pandoc or in skylighting (which I think introduce the css)

Locally, inserted this rules, fix the issue.

[jgm]

Probably the best place for this is in the default reveal.js template:

.reveal .sourceCode {
  overflow: visible
}

[cderv]

Just a warning here - we just saw that, if this solve the issue for simple code block, this will prevent scrolling in revealjs slide when code block have more lines.

• Previously: No line number shown but scrolling could happen because revealjs allows it.
• With the fix: Line numbers show up when .numberLines is added but scrolling is lost in revealjs.

I am just not sure yet if both are compatible considering how the line numbers are set with Pandoc highlighter. I'll play with the CSS.

[cderv]

best solution we add was to moved the numbers for line inside the pre block

This requires

.reveal pre.numberSource code>span {
    left: -2em;
}

instead of the default

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

introduced by skylighting
https://github.com/jgm/skylighting/blob/87d7b35731d634b9a629b23f6e06a76cf1a0c1d7/skylighting-core/src/Skylighting/Format/HTML.hs#L164-L165

Maybe this is better for revealjs output.

[jgm]

Not sure which is better. Aesthetically I prefer the numbers to be outside of the pre, where it's obvious they're not part of the code. On the other hand losing scroll will be an issue for some people.
It would be nice to have a solution that didn't have either drawback.

The css used by skylighting could use an overhaul:

• HTML code blocks with line numbers have 4em extra padding at the end of each line skylighting#104
• Indicate wrapped lines skylighting#75

[cderv]

It would be nice to have a solution that didn't have either drawback.

Yes I agree.

This is some CSS tweaks to come with. We may try improve that - I'll share the result we may come with.

Hopefully someone will see your call in jgm/skylighting#104 (comment)