Mkdocs-material: Break lines in wide code examples
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.
digitalcraftsman
All 6 comments
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?
carlosperate
on 16 Mar 2016
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.
digitalcraftsman
on 16 Mar 2016
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.
squidfunk
on 17 Mar 2016
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...
StefanZander
on 23 Jul 2019
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.
squidfunk
on 23 Jul 2019
Thanks for the helpful response Martin; that seems totally reasonable to me.
StefanZander
on 19 Nov 2019
Related issues
40huo
·
3Comments
tiangolo
·
3Comments
atmarx
·
4Comments
madrus
·
3Comments
ghost
·
3Comments
Most helpful comment
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.