How to wrap long lines inside of markdown ``` code ``` in Github and Gitlab issues?

Question

eg:

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

will force user to scroll in github/gitlab issues. Is there a way to soft-line wrap inside code block ?

I've read the related questions but they seem different (eg jekyll etc).

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)

EDIT: see also https://github.com/softvar/enhanced-github/issues/95

Answer 1

Looks like this is not possible yet. But you can use some extensions to work around the markup on GitHub - this chrome extension here is pretty cool, See this github thread here for more

Answer 2

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

If you don't have access to external CSS, just add the following <style> on the same page:

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

All code blocks on that page will be word-wrapped. The word-break: break-word will avoid breaking the words across lines.

(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)

Answer 3

Instead of wrapping your code with triple backticks ``` wrap it with <code>...</code> tags.

This new feature was added to GitLab in Feb 2022.

Answer 4

The imperfect workaround I currently use is to replace the

``` 

with a single backtick:

`

...and do that line by line. which is infeasible for larger code chunks, and also makes highlighting the code harder for viewers of the markdown. So this 'line by line' workaround is strongly inferior to a genuine code wrap for code contained inside ```.

Answer 5

A quick workaround is to quote your codeblocks, e.g.

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

Make sure you keep the three backticks inline with the very long line. Like this:

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

Answer 6

Found following solution for myself and tested it on the "github":

1) Create file with suffix ".md"

2) Use <div> tag to solve the requested goal - splitting up long lines into several making it be marked down as one line.

Example:

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

Will be viewed as following:

I am very long line

Answer 7

Add below CSS in your output HTML file or edit it in the linked CSS

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

Answer 8

Simple: Use extension like User Css

Code for default pre code (this too) and gitlab

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

Or use another extension, like JSScript triks for full control of own js/css

Switch "Wrap/Unwrap" for pre code anywhere:

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);

in CSS section add styles:

Styles, depend checkbox status

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

See code at https://gitlab.com/MrSwed/wrap-unwrap-for-pre-code