Way to view code blocks with loooong lines better

Code blocks with long lines (as they appear in stack traces and similar) are shown with a scroll bar on Github:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

That, combined with the 700px width of the comments makes it very hard to get an overview of the actual content.

It would be awesome if something like a “fullscreen” button would appear in the top right of the code block that e.g. takes the code block out of the comment box and lets it use the full screen width.

Bad mockup: (Uses width:1800px; position:relative; left:-480px; to simulate the effect)

Maybe this could also be dynamic so it just uses the size it needs to the lines be fully displayed.

If the total screen width still is not enough, it would still show the scrollbar of course.

[Mottie]

In GitHub Dark we use the following global css:

body:not(.nowrap) .blob-code-inner,
body:not(.nowrap) .markdown-body pre > code,
body:not(.nowrap) .markdown-body .highlight > pre {
  white-space: pre-wrap !important;
  word-break: break-all !important;
  overflow-wrap: break-word !important;
  display: block !important;
}
body:not(.nowrap) td.blob-code-inner {
  display: table-cell !important;
}

You can toggle a class of “nowrap” on the body to toggle the feature - this also works if you paste in the above css into the “Custom CSS” block of RGH.

There is also a GitHub toggle code wrap userscript that adds a button within each code block to allow toggling of the line wrap.

[sindresorhus]

Thanks for sharing the example. Makes sense.

I agree this could be useful. It should only be as wide as not needing a scrollbar anymore.