CODEWITHSUNDEEP
cssgithub
user3310334
user3310334

Reputation:

How can I Soft-wrap code in GitHub's file viewer?

When I'm looking at a text file on GitHub.com, how can I make it wrap the lines instead of having horizontal scroll?

In the GitHub website editor, I can choose the option "Soft Wrap" from a top-right drop down, but there is no such drop down, nor any option anywhere on the page that I can find, to also wrap lines when just viewing code.

I've tried to write user stylesheets to customise the appearance, but manually setting the width of the <td> that the line of code is in or the <table> that the code and line numbers are in doesn't actually change the width of that element, and setting different overflow values here doesn't change the behaviour either.

Upvotes: 2

Views: 1496

Answers (2)

starball
starball

Reputation: 51038

The CSS for the code lines uses white-space: pre, which means that the text gets rendered as it is in the source markup, with newlines and line-break markup intepreted literally, and no other line-wrapping automatically applied.

If you want to apply soft-wrap outside of edit mode in GitHub's file viewer, you'll need to write a userstyle or userscript.

For example, the following CSS makes lines wrap at 80 characters if the viewport is wide enough that there wouldn't be overflow, and to wrap at whatever point would prevent overflow otherwise:

.js-file-line {
    white-space: pre-wrap;
    max-width: 80ch;
    display: inline-block;
}

At the time of this writing, the selected elements' HTML class attribute is blob-code blob-code-inner js-file-line. I chose js-file-line from those somewhat arbitrarily (it seemed the most liekly to not be used for other purposes based on its specific naming).

You may also be interested in using

  • width instead of max-width, which will make the soft-wrapping always wrap at the specified width, even if there would be overflow as a result for sufficiently small viewport width.

  • whitespace: break-spaces see MDN for more info.

How you inject this into your webpage is up to you. If you use Tampermonkey, you can use GM_addStyle. Ex.

// ==UserScript==
// @name         GitHub softwrap
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  
// @author       https://stackoverflow.com/users/11107541
// @match        *://github.com/*
// @run-at       document-start
// @grant        GM_addStyle
// ==/UserScript==

GM_addStyle(`
.js-file-line {
    white-space: pre-wrap;
    max-width: 80ch; /* <- width at which to wrap */
    display: inline-block;
}`);

Bonus history: There was a feature request for this a long time ago: Feature Request: allow toggling "soft wrap" on and off when viewing files #1982.

Upvotes: 0

user3310334
user3310334

Reputation:

This is because the td.blob-code table cells containing code lines in GitHub viewer have the CSS rule white-space: pre, which forcefully prevents breaking at white space no matter what (it also overrides width etc. properties)

table.pre td {
  white-space: pre;
}

table.normal td {
  white-space: normal;
}
<code>white-space: pre;</code>
<table class="pre">
  <tbody>
    <tr>
      <td>1</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere nisi at enim vehicula faucibus. Sed lobortis malesuada finibus. Nunc bibendum id erat nec aliquet. Aenean convallis gravida nisi dapibus facilisis. Proin gravida consectetur porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales odio maximus orci vulputate, non aliquet felis ornare. Nunc convallis orci eget urna laoreet, sit amet suscipit arcu interdum. Nam vel ante tellus.</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Curabitur sed volutpat tortor, molestie faucibus justo. Praesent at massa vitae felis interdum ultricies ac at ante. Curabitur lobortis, urna nec sodales mattis, nibh velit rhoncus mauris, in sagittis odio eros ut velit. Mauris a cursus sem. Integer id varius nisi. Nullam posuere molestie blandit. Donec dapibus elementum ex sit amet hendrerit.</td>
    </tr>
  </tbody>
</table>
<code>white-space: normal;</code>
<table class="normal">
  <tbody>
    <tr>
      <td>1</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere nisi at enim vehicula faucibus. Sed lobortis malesuada finibus. Nunc bibendum id erat nec aliquet. Aenean convallis gravida nisi dapibus facilisis. Proin gravida consectetur porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales odio maximus orci vulputate, non aliquet felis ornare. Nunc convallis orci eget urna laoreet, sit amet suscipit arcu interdum. Nam vel ante tellus.</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Curabitur sed volutpat tortor, molestie faucibus justo. Praesent at massa vitae felis interdum ultricies ac at ante. Curabitur lobortis, urna nec sodales mattis, nibh velit rhoncus mauris, in sagittis odio eros ut velit. Mauris a cursus sem. Integer id varius nisi. Nullam posuere molestie blandit. Donec dapibus elementum ex sit amet hendrerit.</td>
    </tr>
  </tbody>
</table>

To overwrite this via a user stylesheet and enable word-wrapping in GitHub, simply overwrite that rule on the <td>s:

#repo-content-turbo-frame .blob-code-content td.blob-code {
  white-space: normal !important;
}

Upvotes: 1

Related Questions