Line numbers plugin does not work well with line-wrapping

[uranusjr]

Not sure whether this is inside the scope of Prism, but I figured it probably doesn’t hurt to ask…

Prism’s themes do not wrap horizontally overflowed lines by default, and the line-numbers plugin sort of takes advantage of this, and creates a span element for each newline in the code. But in some situations (e.g. print materials) it is still more desirable, or even necessary to override this rule (word-wrap: break-word;). Unfortunately this would break the line numbers’ layout:

I’m not even sure how this could be resolved. Maybe it’d be necessary to wrap each line in code in a div, and somehow match the size of the line number elements to their lines. Or even re-format the whole thing as a table. But hopefully Prism can (and is willing to) fix this.

[Golmote]

@mortalis13 gave it a try some time ago: #560. It resulted in the creation on this repo: https://github.com/mortalis13/Prism-Wrap-Lines-Test

Note that he wanted each wrapped line to count as only 1. Is that also what you expect or do you expect your example code to display 8 line numbers?

[Golmote]

I took some time to play around with his code again. There seems to be a way to achieve the expected result without modifying prism-core, but this can only work for raw text, since highlighted code might have HTML elements spanning multiple lines and my code would break them.

Original behaviour: http://jsfiddle.net/7wL6dtmw/
Modified plugin + css to make it work with wrapped lines: http://jsfiddle.net/7wL6dtmw/2/ (Tested in Firefox and Chrome)

This is far from being perfect. ><

[uranusjr]

@Golmote Yup, this is exactly what I need. I don’t currently need to highlight things, so I’ll probably go for your modified version. Thanks. :)

[laukstein]

Needs compatibility also on <code> width change.

[windowsair]

@Golmote 😔It does not seem to work properly. When you change the window size, the above problems will occur.

[Golmote]

This was finally fixed with #584 merged.