stylishthemes / github-code-wrap Goto Github PK

When I use the default CSS, using the Stylus extension, the lines are not wrapped, but after editing:

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;
 }

To:

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

Word wrapping occurs correctly

• Browser: Firefox 107.0.1 (64-bit)
• Operating System: Windows 10 Home [Version: 21H2]
• Link to page with the issue: https://github.com/charlesr1971/cfspreadsheet-lucee-5/blob/master/lar/org/cfpoi/spreadsheet/Spreadsheet.cfc
• Screenshot:

I found this example where this css doesn't wrap the code properly.

If I add overflow-wrap: break-word; it sort of fixes it:

@-moz-document domain("github.com"), domain("gist.github.com") {
.blob-code-inner,
  .markdown-body pre > code,
  .markdown-body .highlight > pre {
    white-space: pre-wrap !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    display: block !important;
  }
  td.blob-code-inner {
    display: table-cell !important;
  }
}

Oddly in Chrome, the scroll bar still appears. I wonder if there is a better solution.

With all the updates to GitHub recently, it appears that code wrap no longer works for me.

• Browser: Brave browser (Chromium based if you haven't heard of it)
• Operating System: Windows 10 64 bit
• Link to page with the issue: GitHub gist
• Screenshot: