如何在github&gitlab问题中将markdown"``code blocks```中的长行换行？

Question

例如:

```
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等).

编辑:手动编辑代码限制为80列不是一个可行的选项(例如,从编译器输出/日志等粘贴;这是很多工作,不应该是必要的)

Answer 1

不要用三个反引号包装您的代码，而是```用标签包装它<code>...</code>。

这一新功能于 2022 年 2 月添加到 GitLab。

Answer 2

一个快速的解决方法是引用您的代码块，例如

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```

Answer 3

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

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

Answer 4

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

``` 

带一个反引号：

`

...并逐行执行此操作。这对于较大的代码块是不可行的，并且也使得 Markdown 的查看者更难突出显示代码。因此，这种“逐行”解决方法远不如包含在 ``` 中的代码的真正代码包装。

Answer 5

看起来这是不可能的。但是您可以使用一些扩展来解决 GitHub 上的标记问题 -这里的这个chrome 扩展非常酷，请在此处查看此github 线程以获取更多信息

Answer 6

简单：使用像User Css这样的扩展

默认代码pre code（这也是）和 gitlab

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

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

在任何地方为预代码切换“包装/展开”：

在 JS 部分添加 switch init：

为长行添加开关（复选框）的 jQuery 示例

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

在https://gitlab.com/MrSwed/wrap-unwrap-for-pre-code查看代码

Answer 7

对于支持 markdown 的非 github 地方，扩展 @Tarun 的答案（这对于常规 HTML 页面非常有用），如下所示：

如果您无法访问外部 CSS，只需<style>在同一页面上添加以下内容：

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

该页面上的所有代码块都将自动换行。这word-break: break-word将避免单词跨行。

（SO 的问题具体是关于 Github 问题的，但把它作为答案放在这里，因为这是 Google 上出现的第一个链接，用于在 Markdown 中将代码块换行 - 并且对许多人会有帮助，从类似的赞成票中可以明显看出回答）