Break lines in wide code examples

[digitalcraftsman]

Sometimes the lines code examples can be very long (e.g. due to indentation ). This creates horizontal scrollbars which isn't ideal for reading. Those could be avoided adding a CSS rule for breaking a line automatically if it doesn't fit.

[carlosperate]

Are these scrollbars in the entire window, or just the code area? If only in the code area I much prefer this view option as compared with automatic breaklines, so maybe an option could be included?

[digitalcraftsman]

The horizontal scrollbar only appears in the code block, so the layout isn't broken. An option to enable/disable this behavior would be a good compromise.

[squidfunk]

Well, especially on mobile devices, many lines will break, and in my opinion the code will become unreadable. You can easily fix it with one line of extra css if you like it better, so adding an option for this would be overkill.

Reading all those specific features we could think about adding a recipes page to the documentation, where we show how to do this things with extra css.

[StefanZander]

I sometimes use a code environment (style) for discussing texts with students since code blocks offer line numbers that help in referring to specific lines/sentences/words/etc. in the text.

Since I haven't found the recipe yet, I would very much like the option of automatic line breaks since there are definitely use cases where this feature is helpful.

Just my 2cents...

[squidfunk]

Since I haven't found the recipe yet, I would very much like the option of automatic line breaks since there are definitely use cases where this feature is helpful.

Unfortunately, within the HTML, line numbers are detached from the code – they are within a separate table cell, see:

This means that it's impossible to break lines of code with CSS and have them still align with line numbers. The table is rendered by CodeHilite which is a Python Markdown extension. Material can only provide styles for the output it gets from MkDocs and by then it's too late.

[StefanZander]

Thanks for the helpful response Martin; that seems totally reasonable to me.