code wrap incorrectly with line number

[WAcry]

Bug description

IDE: VScode with Quarto 1.2.269

OS: Windows 11

Description:

Suppose I create a default web project.

Then I open the code wrap and line number in configs as below:

format:
  html:
    code-line-numbers: true
    code-overflow: wrap

Then if I have a code block with a very long line, it will look bad, as shown below in the first code block:

I have to close the code line number to make the wrapping code overflow works, as the second code block. The problem exists in different themes and fonts too.

Checklist

• Please include a minimal, fully reproducible example in a single .qmd file? Please provide the whole file rather than the snippet you believe is causing the issue.
• Please format your issue so it is easier for us to read the bug report.
• Please document the RStudio IDE version you're running (if applicable), by providing the value displayed in the "About RStudio" main menu dialog?
• Please document the operating system you're running. If on Linux, please provide the specific distribution.

[adomingues]

Hi all, has there been any update on this? I am still seeing this issue.

[mcanouil]

Indeed, the issue is still there.
Feel free to make a PR if you feel up to it or keep watching this issue until there is a update.

[WAcry]

Hi all, has there been any update on this? I am still seeing this issue.

Try Writerside if you don't need dynamic python/R output.

[mcanouil]

The issue here seems to only be CSS, e.g.:

---
title: "Quarto Playground"
format:
  html:
    code-line-numbers: true
    code-overflow: wrap
include-in-header:
  - text: |
      <style type="text/css">
      pre.numberSource code > span {
        left: -2.1em;
      }
      </style>
---

```{r}
print("Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!")
```

I believe the same rule as for Reveal.js could be used:

• https://github.com/quarto-dev/quarto-cli/blob/main/src/resources/formats/revealjs/plugins/line-highlight/line-highlight.css#L13-L15

[cderv]

The CSS that applies on cells with code line number comes from Pandoc highlighting system

https://github.com/jgm/skylighting/blob/f408b457a0a19ff06ff0e5ad69dcd168e5215435/skylighting-format-blaze-html/src/Skylighting/Format/HTML.hs#L173-L214

They apply on margin on pre.numberSource and then correct it for the pre.numberSource code > span using left.

I wonder if we should just overwrite and pass our CSS directly 🤔

---
title: "Quarto Playground"
format:
  html:
    code-line-numbers: true
    code-overflow: wrap
include-in-header:
  - text: |
      <style type="text/css">
      pre.numberSource {
        margin: 0
      }
      pre.numberSource code > span {
        left: 0;
      }
      </style>
---

```{r}
#| results: hold
print("Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!")
print("Bye")
```

Not sure why they do add a margin and then move left as none is needed it seems

Probably some edge case where the margin is needed... 🤔

[mcanouil]

For revealjs, Quarto does change the CSS, so maybe worth unifying/harmonising this CSS treatment.

[cderv]

Oh sorry I missed your link above. Right we should probably share the same CSS for this 🤔