【问题标题】：How to wrap long lines inside of markdown ``` code ``` in Github and Gitlab issues?如何在 Github 和 Gitlab 问题中的 markdown ``` 代码 ``` 中换行？
【发布时间】：2017-05-05 10:09:23
【问题描述】：

例如：

```
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 列不是一个可行的选择（例如，从编译器输出/日志等粘贴时；这是很多工作，应该没有必要）

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

【问题讨论】：

我不认为你可以。在这种情况下，最容易控制的是确保每行的长度合理。例如，有些人建议每行最多 80 个字符。
如果您要复制和粘贴，则复制到适当的文本编辑器中，使用编辑器内置的换行功能对行进行硬换行，然后复制到您的目的地。这是我见过的唯一始终如一的自动化解决方案。
在 stackoverflow markdown 中，您似乎根本做不到。你甚至不能使用 HTML 标签，因为 style 属性被剥离了。

标签： github markdown gitlab word-wrap

【解决方案1】：

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

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

【讨论】：

这应该被接受为答案，最简单的方法。
这实际上与仅使用单个 ` 换行相同
引用的文本块与未引用的文本块具有不同的含义。引用代码块只是为了让它包裹文本会改变含义。这个答案相当于说“只需将您的代码包装在<h1> 标记中”。当然，也许它有效，但它很丑。

【解决方案2】：

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

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

【讨论】：

问题是关于 GitHub，而不是你可能拥有的一些 HTML 页面。
这确实解决了我的问题（部分）。它现在在我的页面上换行，但它不尊重缩进。有什么办法可以换行并尊重代码缩进？
MD 支持HTML tags 设计.. 所以如果你需要使用style 标签
@OrCohen 你知道markdown可以让你使用一些html标签，对吧？而且从现在看来，github 支持所有我曾经真正使用过的标签。我也倾向于避免使用它们，但是当没有其他选择时它们可以很好地补充。我自己滥用<details>/<summary>标签。

【解决方案3】：

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

```

用一个反引号：

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

【讨论】：

【解决方案4】：

简单：使用User Css 之类的扩展名

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


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

或者使用其他扩展，例如JSScript triks 来完全控制自己的js/css

在任何地方为预代码切换“Wrap/Unwrap”：

在 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

【讨论】：

【解决方案5】：

看起来这还不可能。但是您可以使用一些扩展来解决 GitHub 上的标记问题 - 这里的 chrome extension 非常酷，请参阅此github thread here 了解更多信息

【讨论】：

感谢您的链接！只针对 github，不针对 gitlab； gitlab.com/gitlab-org/gitlab-ce/issues/25850中报告的问题

【解决方案6】：

对于支持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 的代码块中换行 - 从赞成类似的答案）

【讨论】：

我在github.com/timotheecour/Nim/issues/734#issue-892377990 中尝试过，但它似乎不起作用？
@timotheecour github 可能会去掉样式标签，因此即使它支持降价，它也不起作用。上述答案是@TarunKhurana 答案的扩展，适用于常规 HTML 页面或其他接受降价的地方。我已经相应地更新了答案，现在
这适用于 CodiMD/HackMD 中的围栏代码块。

【解决方案7】：

为自己找到了以下解决方案并在“github”上进行了测试：

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

2) 使用 div> 标签来解决请求的目标——将长行分成几行，使其标记为一行。

例子：

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

将被视为如下：

I am very long line

【讨论】：

这与 OP 试图做的完全相反。