css 如何在GitHub的文件查看器中软 Package 代码?

2hh7jdfx  于 2023-04-13  发布在  Git
关注(0)|答案(2)|浏览(100)

当我在www.example.com上查看一个文本文件时GitHub.com,我如何使它换行而不是水平滚动?
在GitHub网站编辑器中,我可以从右上角的下拉列表中选择“Soft Wrap”选项,但没有这样的下拉列表,也没有任何我可以找到的页面上的任何选项,也可以在查看代码时换行。
我尝试编写用户样式表来自定义外观,但手动设置代码行所在的<td>width或代码和行号所在的<table>实际上并不会改变该元素的宽度,在这里设置不同的overflow值也不会改变行为。

bttbmeg0

bttbmeg01#

这是因为GitHub查看器中包含代码行的td.blob-code表格单元格具有CSS规则white-space: pre,无论如何都可以强制防止白色处中断(它还覆盖了width等属性)

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>

要通过用户样式表覆盖它并在GitHub中启用自动换行,只需在<td> s上覆盖该规则:

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

42fyovps2#

代码行的CSS使用white-space: pre,这意味着文本将按照源标记中的原样呈现,按字面意思解释换行符和换行符标记,并且不会自动应用其他换行。
如果你想在GitHub的文件查看器中的编辑模式之外应用软 Package ,你需要编写一个userstyle或userscript
例如,下面的CSS使行在80个字符处换行,如果视口足够宽,不会溢出,并且在任何点处换行可以防止溢出:

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

在撰写本文时,所选元素的HTML类属性是blob-code blob-code-inner js-file-line。我从这些元素中选择了js-file-line(根据其特定的命名,它似乎最有可能不用于其他目的)。
您可能也有兴趣使用

  • width而不是max-width,这将使软 Package 始终以指定的宽度进行 Package ,即使由于视口宽度足够小而导致溢出。
  • whitespace: break-spaces参见MDN了解更多信息。

如何将其注入到您的网页中取决于您。如果您使用Tampermonkey,您可以使用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;
}`);

奖金历史:很久以前有一个功能请求:Feature Request: allow toggling "soft wrap" on and off when viewing files #1982

相关问题