Refined-github: Way to view code blocks with loooong lines better

[janpio]

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.

[sindresorhus]

Can't we just soft-wrap overflowing lines?

[janpio]

For log files and stack traces this would unfortunately make them much harder to read and understand.

Here is a real world example: https://github.com/fastlane/fastlane/issues/13305#issue-357599647

[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.

[sindresorhus]

Wonder if we could solve this with a gesture instead. Like press and hold to make it pop out, then click outside to close it. Open to ideas.

[fregante]

That sounds great until you try to select text in it and then it moves 😅

[janpio]

I personally would also prefer an icon button, similar to the "Edit readme" button for example, positioned in the top right corner of the pre/code.

[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.

[busches]

@sindresorhus thoughts on mirroring the css from GitHub Dark that @Mottie posted? I've been using it locally the past two weeks and it's wonderful. :)

[janpio]

The GitHub Dark solution of offering a button to wrap the text is an option, that will not work for logfiles. Wrapping them makes them really hard to skim.

I would still love an "expand" or "use full width" button for code blocks.

[sindresorhus]

How about wrapping by default, with a tiny top-right button to expand fullscreen?

[janpio]

would probably work for me

[fregante]

I think the "toggle wrap" button is the best solution here and it's already offered as a userscript: https://greasyfork.org/en/scripts/18789-github-toggle-code-wrap

More often than not, when I see auto-wrapped pre content it makes zero sense because the indentation is not followed.

Example:

<li className={`list-group-item js-notification js-navigation-item unread ${type}-notification rgh-unread`}>
    <span className="list-group-item-name css-truncate">
        <span className={`type-icon type-icon-state-${state}`}>
            {stateIcons[type][state]()}
        </span>
        <a className="css-truncate-target js-notification-target js-navigation-open list-group-item-link" href={url}
            data-hovercard-url={`${url}/hovercard?show_subscription_status=true`}>
            {title}
        </a>
    </span>
    <ul className="notification-actions">
        <li className="delete">
            <button className="btn-link delete-note">
                {icons.check()}
            </button>
        </li>
        <li className="mute tooltipped tooltipped-w" aria-label={`${type === 'issue' ? 'Issue' : 'PR'} manually marked as unread`}>
            {icons.info()}
        </li>
        <li className="age">
            <relative-time datetime={date} title={dateTitle}/>
        </li>
        <div className="AvatarStack AvatarStack--three-plus AvatarStack--right clearfix d-inline-block" style={{marginTop: 1}}>
            <div className="AvatarStack-body tooltipped tooltipped-sw tooltipped-align-right-1" aria-label={usernames}>
                {avatars}
            </div>
        </div>
    </ul>
</li>

vs wrapped (pre-wrapped to 50ch to better show the issue):

<li className={`list-group-item js-notification 
js-navigation-item unread ${type}-notification 
rgh-unread`}>
    <span className="list-group-item-name 
css-truncate">
        <span className={`type-icon type-icon-state-
${state}`}>
            {stateIcons[type][state]()}
        </span>
        <a className="css-truncate-target js-
notification-target js-navigation-open list-
group-item-link" href={url}
            data-hovercard-url={`${url}/hovercard?
show_subscription_status=true`}>
            {title}
        </a>
    </span>
    <ul className="notification-actions">
        <li className="delete">
            <button className="btn-link delete-note">
                {icons.check()}
            </button>
        </li>
        <li className="mute tooltipped tooltipped-w"
aria-label={`${type === 'issue' ? 'Issue' :
'PR'} manually marked as unread`}>
            {icons.info()}
        </li>
        <li className="age">
            <relative-time datetime={date} title={
dateTitle}/>
        </li>
        <div className="AvatarStack AvatarStack--
three-plus AvatarStack--right clearfix d-inline
-block" style={{marginTop: 1}}>
            <div className="AvatarStack-body tooltipped
tooltipped-sw tooltipped-align-right-1" aria-
label={usernames}>
                {avatars}
            </div>
        </div>
    </ul>
</li>

[janpio]

Totally valid to close this, as wrapping definitely is not the solution.

I still hope some day I find a way to _expand_ the width of code blocks to full width by clicking a button and break out of the limiting column width. Right now I have no idea how to do that though :/

[Mottie]

If you have Stylus/Stylish installed, you can use this style: https://userstyles.org/styles/108591/github-wide

[janpio]

Thanks. I prefer the narrow columns in general, but want to break out of them (just the code block) on demand (in the best case). That seems a bit more complicated ;)