Line wrapping of long code lines

[silverwind]

I just pushed a change that enables wrapping of long lines like this one.

So far It seems to work, but there may be side effects and we also need to take care of Gist and other code boxes. We could do an option for it, but I see no downside, so it may be unnecessary.

[Mottie]

I like it... I'm using it now and I'll report back if I run into any issues.

[Mottie]

The change does not work on encoded images.

You can include a break-all definition, but I don't know if it's a good idea since it will break up words in the middle:

.blob-code-inner {
  white-space: pre-wrap !important;
  word-break: break-all !important;
}

[silverwind]

Hmm, I guess most editors break like break-all, so breaking in the middle of a word is probably acceptable in code, I'll do it. Also, copy-paste is not affected by this, thankfully.

7b241f3

[silverwind]

Looking good so far. The blob-code-inner class i used pretty much everywhere, even in Gist.

[silverwind]

There's a bit of horizontal overflow on diffs it seems: silverwind/uppie@00ca357 (view the suppressed diff). Not sure what's exactly causing the overflow here.

[silverwind]

Added display: block in an attempt to fix that overflow. Watch out for issues :)

[silverwind]

Some weird black borders started to appear in expanded diffs. Not sure how to get rid of them, I think they are table borders:

[Mottie]

It's because some td's have the blob-code-inner class. You can add this to fix it:

td.blob-code-inner {
  display: table-cell !important;
}

[silverwind]

Awesome, thanks 👍

[silverwind]

So far I noticed no issues, I think it's good to go.

[simov]

Can we not use it in issue comments request/request#1932 (comment) at least ? That looks kind of funny and it's definitely not easy to read.

The code block placed inside an issue is much narrower than the one in the source code view, plus line wrapping makes sense only for certain text types.

[silverwind]

With my current font, the inline block fits 89 characters, which isn't too bad as many people still adhere to 80 character lines. We should at least add an option on userstyles.org for people who prefer no wrapping and I think I'll explore a userscript addon to toggle wrapping.

[simov]

80 character lines

That's kind of true but people tend to paste completely random stuff in the comment box. I can still change the style for myself only, but I though that's an actual issue.

[Mottie]

Hey @silverwind, the second line targets code in comments. What is the .markdown-body in the first line targeting?

  /* GitHub Bug: Enable wrapping of long code lines */
  .blob-code-inner, .markdown-body > pre > code,
  .markdown-body > .highlight > pre {
    white-space: pre-wrap !important;
    word-break: break-all !important;
    display: block !important;
  }

[silverwind]

something to test:

longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong

[silverwind]

@Mottie can't remember. It's certainly not Gist. I think you can remove it.

[silverwind]

Made a little toggle button for code boxes in Markdown:

For it to work, we'd have to reduce above selector to just .blob-code-inner. It's not working on dynamically added content yet, for that I'll have to modify the page's stylesheet on-the-fly.

https://gist.github.com/silverwind/6c1701f56e62204cc42b

[silverwind]

@Mottie the second selector is actually for block with highlighting. Their markup is a bit different from non-highlighted boxes.

[Mottie]

Maybe we should make our "GitHub Dark Script" repository again 😋

[Mottie]

LOL - I still have the code from when the repository existed. It contains a script to colorize these comment boxes per author (based on their name).

[silverwind]

Yeah, that was hell of a hack :)

Actually, I'll see if I can get something more general done. Like a script that can toggle on/off certain sections of the stylesheet, that'd be ideal for something like this wrap thing, but could be expanded to more options. I think a "GitHub Dark" option sub-panel is in order.

[Mottie]

@silverwind Do you think we can close this issue now? 😛

[silverwind]

I still would like to make the default to not wrap, wanna make that change? (Might require a option flip in the script too)

[Mottie]

Ok, but I won't be able to get it done until later tonight.

[silverwind]

No hurry 👍

[Mottie]

All done.

[silverwind]

Standalone version for people who prefer wrapping without the script.