Wrap lines in Code Block and adjust line numbers to reflect wrapping?

[Stephen-Gates]

Is there a way to mimic this code formatting where if a line wraps, the line number is not incremented? See line 64.

I've used CSS to get close but am not sure how to adjust line numbering

code {
  white-space : pre-wrap !important;
  word-break: break-word;
}

Line 106 is the equivalent to L64 above, but you can see the Line number has been incremented, rather than shown as a dot •

I suspect this is an upstream issue and not for Material for MkDocs but thought I'd ask here in hope.

[squidfunk]

Good question. It's definitely an upstream issue as I'm sure it happens with any theme.

Probably related to SuperFences or the Highlight extension.

[facelessuser]

It doesn't increment the number for wrapped lines, but it may overflow into the next line. I'm not sure what your configuration is, but, generally, Pygments generates code in such a way that you should not wrap the code.

With that said, you can attempt wrapping lines with spans and such and/or try other line number output styles (other than tables) and play with CSS to try to get something you are happy with. It may be possible to configure it in such a way that you could wrap lines, but I have never spent any time trying to accomplish wrapped lines in code, I just allow scrolling on overflow.

[squidfunk]

Ah right, since the new line_spans flag wraps lines into separate elements, line wrapping might actually be possible to achieve with some CSS, albeit it's probably not going to look as expected (e.g. as in Visual Studio Code).