line numbers positioned wrong in Safari

[Haroenv]

line numbers are smaller than the lines itself. Would maybe be interesting to put them into the same line as the line of code itself to make it simpler.

It looks correct in Chrome.

[brunosimon]

Thanks for the report @Haroenv.

I can't reproduce the bug. What is your safari version? Are you using it on a Mac or a PC? The line-height is set directly on the parent div .viewer which include both the code and the lines.

Are you sure the problem come from the line-height? Maybe the lines you see are those from another file or the last ones are missing.

[Haroenv]

I found what the issue is: if a line wraps, the line numbers continue, while they should break like an editor does.

This is tested on Safari on Mac

In Chrome there's no line wrapping

[brunosimon]

Ok I see it. I'll fix it soon and I'll tell you :)

[brunosimon]

It seems that the problem come from Safari which doesn't recognize white-space: pre;

I'm using Highlight.js for the syntax coloration with vue-highlightjs. The library isn't very flexible and even if I could add one of the line numbers plugins, those are very poorly made and probably won't work in Keppler case.

I tried to add white-space: nowrap; in CSS but all the code get transform into one line.

If anyone has any suggestion that might help

[Haroenv]

Did you try a pure css solution with counters on every line of code? That way it should stay synchronised with the lines I think https://www.sylvaindurand.org/using-css-to-add-line-numbering/

[brunosimon]

Yes but there is two problems:

• There is no way to select each line in CSS
• Those lines number has vue.js interactions