如何在Github和Gitlab的问题中使用```代码```时自动换行？

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问题中解决用户需要滚动的问题？

有没有办法在代码块内软换行？我已经阅读了相关问题，但它们似乎不同（例如Jekyll等）。

编辑：手动编辑代码以限制为80列并不是一个可行的选项（例如，从编译器输出/日志中粘贴时；那将是很多工作，并且不应该必要）

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

- timotheecour

---

我认为你做不到。在这种情况下最容易控制的是确保每行都有合理的长度。例如，有些人建议每行最多不超过80个字符。 - therobinkim

如果您正在复制和粘贴，请将其复制到适当的文本编辑器中，使用编辑器内置的换行功能来硬换行，然后再将其复制到目标位置。这是我见过的唯一一种始终如一的自动化解决方案。 - Waylan

在stackoverflow的markdown中，似乎你根本无法这样做。即使使用HTML标签也不行，因为style属性会被剥离。 - geekley

有趣。在找到解决方案之前，也许使用[代码片段的永久链接]（https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-a-permanent-link-to-a-code-snippet）可能是一种替代方法。 - yoyoyojoe

Answer 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 long

确保您将三个反引号与非常长的行放在同一行。 就像这样：

> ```this line is very long```

- Dan Keezer

---

应该接受这个答案，这是最简单的方法。 - Guillochon

这实际上与使用单引号将该行包装起来是相同的。 - robross0606

引用的文本块与非引用的文本块具有不同的含义。仅为了使文本换行而引用代码块会改变其含义。这个答案相当于说：“只需将您的代码包裹在<h1>标签中。” 当然，它可能有效，但很丑陋。 - monachus

Answer 2

在输出的HTML文件中添加以下CSS，或者在链接的CSS中进行编辑。

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

- Tarun Khurana

---

这个问题是关于 GitHub，而不是你可能拥有的某个 HTML 页面。 - Or Cohen

那确实解决了我的问题（部分地）。现在它正在换行我的页面，但它并不尊重缩进。有没有办法可以换行并尊重代码缩进？ - Saqib Ahmed

MD支持HTML标签设计..因此如果需要，请使用style标签。 - pery mimon

@OrCohen 你知道Markdown可以使用一些HTML标签，对吧？从现在的情况来看，GitHub支持我曾经真正使用过的所有标签。我也倾向于避免它们，但当没有其他选择时，它们会很好地补充。我自己滥用<details>/<summary>标签。 - Hiro

在mkdocs-material中工作得非常好！谢谢！ - Jacek Laskowski

这就是我苦苦寻找已久的答案。在我的情况下，我一直在寻找从VSCode导出的HTML文档的解决方案。这解决了我的问题，所以我并不介意它是在GitHub/GitLab的问题中。 - undefined

Answer 3

不要使用三个反引号```包裹你的代码，而是使用<code>...</code>标签进行包裹。

这个新功能是于2022年2月加入GitLab的。

- Alexander Vasenin

---

“被添加到GitLab”但这是一个指向GitHub的链接。 - A.L

链接确实是错误的。不幸的是，我找不到正确的URL，所以我将把它删除。 - Alexander Vasenin

我猜这样做可以，但格式非常丑陋... - Ben Farmer

虽然不完美，但在GitHub上它能胜任。+1。 - undefined

Answer 4

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

``` 

`只需要一个反引号：`

`

......并逐行执行。这对于较大的代码块来说是不可行的，同时也使得为markdown中的代码进行语法高亮变得更加困难。因此，与“ ``` ”包裹起来的代码相比，“逐行执行”的解决方法明显劣于真正的代码换行。

- stevec

---

必须指出，使用`引号括起来的字符串可能会呈现为Markdown格式， 但在```中则显示为普通文本。 - yurenchen

Answer 5

简单易用：使用类似User Css的扩展程序

用于默认的pre code代码块（包括gitlab）的代码。

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

或者使用其他扩展程序，比如JSScript triks，以完全控制自己的JS / CSS。

在任何地方切换“包装/取消包装”预格式代码：

在JS部分添加切换初始化：

jQuery示例仅为长行添加一个开关（复选框）

// https://dev59.com/1lgR5IYBdhLWcg3whdfv#57341170
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://dev59.com/1lgR5IYBdhLWcg3whdfv#57341170 */
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查看代码。

- MrSwed

Answer 6

看起来目前还不可能。但是你可以使用一些扩展程序来解决GitHub上的标记问题 - 这里的Chrome扩展非常酷， 更多信息请参见此处的GitHub线程。

- Tony Vincent

---

感谢您提供链接！该链接只涉及Github，未涉及Gitlab；我已在https://gitlab.com/gitlab-org/gitlab-ce/issues/25850上报告了问题。 - timotheecour

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 issues的特定问题，但将其作为答案放在这里，因为这是在Google上出现的第一个链接，对许多人来说都很有帮助，正如相似答案上的赞数所表明的那样)

- Anupam

---

我在 https://github.com/timotheecour/Nim/issues/734#issue-892377990 尝试了这个，但似乎不起作用？ - timotheecour

@timotheecour github 可能会剥离样式标签，因此即使它支持 markdown，也无法在那里工作。上面的答案是对 @TarunKhurana 答案的扩展，适用于常规 HTML 页面或其他接受 markdown 的地方。我已经相应地更新了答案。 - Anupam

这对于在CodiMD/HackMD中的围栏代码块起作用。 - monachus

Answer 8

我在“GitHub”上找到了以下解决方案，并对其进行了测试：

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

2）使用<div>标签来实现所需的目标 - 将长行分成几行，使其被标记为一行。

例如：

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

将被视为以下内容：

I am very long line

- Valeriy

---

这正好与原帖作者试图做的相反。 - lacostenycoder