在 Github 和 Gitlab 问题中，如何在标记“代码”中包装长行？

例如:

```
some very long line; some very long line; some very long line; some very long line; some very long line; some very long line; some very long line; some very long line; some very long line; some very long line;
```

将强制用户在 github/gitlab 问题中滚动。 有没有办法在 code block内部软线包装？

我已经读了相关的问题，但他们似乎不同(如 Jekyll 等)。

EDIT: manually editing code to limit to 80 columns is not a viable option (eg, when pasting from a compiler output/log etc; that's a lot of work and should not be necessary)

编辑: 参见 https://github.com/softvar/enhanced-github/issues/95

58383 次浏览
小开

看来这还不可能。但是你可以使用一些扩展来处理 GitHub 上的标记-这个 铬合金扩展非常酷, 更多信息请参见 这里是 github 线程

小开

我找到了下面的解决方案，并在“ github”上进行了测试:

1)创建后缀为“ . md”的文件

2)使用 < < em > div > 标签解决所要求的目标——将长线分成几行，使其标记为一行。

Example:

<div>I am
very
long line</div>

将被视为:

I am very long line
小开

在输出 HTML 文件中添加以下 CSS or 在连接的 CSS 中编辑它

code {
white-space : pre-wrap !important;
}
小开

简单: 使用像 用户浏览器这样的扩展

默认 pre code(this too)和 gitlab 的代码


pre code,  /* stackoverflow */
.md:not(.use-csslab) pre code
{
white-space: pre-wrap;
}

pre code pre-wrap

或者使用另一个扩展，比如 JSScript Triks来完全控制自己的 js/css

在任何地方切换“包装/取消包装”预编码:

in JS section add switch init:

jQuery example to add an switch (checkbox) only for long lines

// https://stackoverflow.com/a/57341170/5447232
var ws = function(i,e) {
$("pre code").filter(function(){
var _t = $(this).parent();
return !_t.has("input[switch").length
&& _t.get(0).scrollWidth > _t.innerWidth();
}).before("<input type='checkbox' checked switch title='Wrap/Unwrap' />");
}
$("body").on("change", ws).change();
$(window).bind("scroll", ws);

在 CSS 部分添加样式:

样式，取决于复选框状态

/* https://stackoverflow.com/a/57341170/5447232 */
pre {position:relative;}
input[type="checkbox"][switch] {
position: absolute;
display: block;
right:0.5em;
top:0.5em;
}
pre input[switch]:checked + code { white-space: pre-wrap; }
/* pre input[switch]:not(:checked) + code { white-space: pre; } */

enter image description here enter image description here

请参阅 https://gitlab.com/MrSwed/wrap-unwrap-for-pre-code的代码

小开

我目前使用的不完美的解决方案是替换

```

只需要一个反勾:

`

然后一行一行地做。这对于较大的代码块来说是不可行的，并且也使得标记查看器更难突出显示代码。因此，这种“逐行”解决方案明显不如对“’中包含的代码进行真正的代码包装。

小开

一个快速的解决方案是引用你的代码块，例如。

this line is very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long

确保你的三个反勾与这条很长的线保持一致，像这样:

> ```this line is very long```
小开

For non-github places where markdown is supported, extending @Tarun's answer (which works great for regular HTML pages) as follows:

如果你不能访问外部 CSS，只需在同一页面上添加以下 <style>:

<style>
code {
white-space : pre-wrap !important;
word-break: break-word;
}
</style>

该页面上的所有代码块都将是字包装的。 word-break: break-word将避免跨行分割单词。

(SO's question is about Github issues specifically, but putting this down as an answer here since this is the first link on Google that appears for wrapping lines in code blocks in markdown - and would be helpful to many people as evident from the upvotes on similar answer)

小开

不要使用三个反勾来包装代码，而是使用 <code>...</code>标记来包装代码。

这个新特性于2022年2月被添加到 GitLab。


提交答案