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

GithubMarkdownGitlabWord Wrap

Github Problem Overview


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

Github Solutions


Solution 1 - Github

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

Solution 2 - Github

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

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

Solution 3 - Github

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

Solution 4 - Github

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

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

enter image description here enter image description here

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

Solution 5 - Github

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

Solution 6 - Github

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)

Solution 7 - Github

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

This new feature was added to GitLab in Feb 2022.

Solution 8 - Github

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestiontimotheecourView Question on Stackoverflow
Solution 1 - GithubDan KeezerView Answer on Stackoverflow
Solution 2 - GithubTarun KhuranaView Answer on Stackoverflow
Solution 3 - GithubstevecView Answer on Stackoverflow
Solution 4 - GithubMrSwedView Answer on Stackoverflow
Solution 5 - GithubTony VincentView Answer on Stackoverflow
Solution 6 - GithubAnupamView Answer on Stackoverflow
Solution 7 - GithubAlexander VaseninView Answer on Stackoverflow
Solution 8 - GithubValeriyView Answer on Stackoverflow