React-markdown: how to line break ?

[converge]

Tried different ways, and couldn't find it. Is there some way to break lines ?

[danyx23]

Two spaces at the end of a line as per markdown conventions (weird, but that is markdown for you)

[converge]

thanks @danyx23 , I can break one line, is it possible to break multiple lines ?

[converge]

just figured it out:
 
( with two spaces after   )

[sinnbeck]

How did you get this working? Cannot get it to break multiple lines

[converge]

@Resin01 just updated my answer above.

[niculistana]

see: https://github.com/rexxars/react-markdown/issues/190

[telmotrooper]

Sorry to bump up this issue, but the way it worked for me was to use two spaces followed by \n.
Example: <ReactMarkdown source={"Test \nTest \nTest"} /> which turns into

Test
Test
Test

[sreeramofficial]

How about "Test \n\nTest \n\nTest" ?

[LinusU]

Keep in mind that many editors strip out trailing whitespace by default, I usually do it like this to make it extra clear:

const source = `
# Demo

Line 1${'  '}
Line 2${'  '}
Line 3
`

const Demo = () => {
  return <Markdown source={source} />
}

[jonathanmv]

What about empty lines?
I want to achieve

Line 1

Line 2

But when my string is Line 1. \n \nLine 2 the output is the same as doing just Line 1. \nLine 2 (only one line break), which is

Line 1
Line 2

[jonathanmv]

I just noticed that the output, although it looks the same, has a different html structure. From my observations when the input is Line 1 \nLine 2, the output is <p>Line 1<br>Line 2</p>. However, when adding two line break, it creates another p element. So, when the input is Line 1 \n \nLine 2, the output is <p>Line 1</p><p>Line 2</p>. This let me have the empty line I wanted by setting the p margin-bottom

[JulesPatry]

To get multiple line breaks after another, I found that adding a &nbsp after the \n solved this. This is the magic line value.replace(/\n/gi, '\n  ')

const value = `hello
\n
\n
world
`

const source =  value.replace(/\n/gi, '\n  ');
...
<ReactMarkdown
      source={source}
      className="reactMarkDown"
    />

Cheers.

[omril1]

How do I use it in a table?

| Option | Description |
| -------- | ------------ |
| -e     | line1   
line2

Doesn't seem to work in tables.

[shinyuy]

To get spaces between paragraphs, I tried many things but this is what worked for me, give a className to react markdown component like so , className paragraph and in your stylesheet, pick the paragraph className and style it p tags like so .paragraph p { margin-bottom: 20px; } and this gets you spaces between your paragraphs. Just so it is clear, my react markdown component with the class name is stripped out of my answer.

[ntltd]

A very simple solution here could be to do it using pure CSS with the white-space property.

It worked for me as following:

/* CSS */
.line-break {
  white-space: pre-wrap;
}

```js
// JavaScript
source="You are the one\nFor me\nFor me\nFor me\nFormidaaable !"
className="line-break"
/>

```html
<!-- Render -->
You are the one
For me
For me
For me
Formidaaable !

[wooorm]

use two spaces for standard markdown breaks, or use commonmark:true in parserOptions and then a backslash before a newline for commonmark breaks, or use remark-breaks for any newline as a break

[mzrzvi]

The solution using

.line-break {
  white-space: pre-wrap;
}

works for me locally on my dev server, but doesn't work when I build my app locally or in production (Netlify). Has anyone run into this issue before?

[quolpr]

This is a plugin that solves the issue perfectly:

https://github.com/remarkjs/remark-breaks/issues/2#issuecomment-671081891

Usage:

import ReactMarkdown from 'react-markdown';
import breaks from 'remark-breaks';
import {
  Settings,
  Processor,
  ParserConstructor,
  ParserFunction,
} from 'unified/types';
import { Node } from 'unist';

const reBlankLine = /^[ \t]*(\n|$)/;

export function blankLines(this: Processor<Settings>) {
  const parser = this.Parser;

  if (!isRemarkParser(parser)) {
    throw new Error('Missing parser to attach `blankLines` to');
  }

  parser.prototype.blockTokenizers.blankLine = blankLine;
  // NOTE [email protected] we use depends on [email protected]  while we use [email protected]
  if (parser.prototype.blockMethods.indexOf('blankLine') === -1) {
    parser.prototype.blockMethods.unshift('blankLine');
  }

  function blankLine(
    this: Tokenizer,
    eat: (consumed: string) => (node: Node) => void,
    value: string,
    silent: boolean
  ): true | void {
    let index = 0;
    const length = value.length;
    let eatenLines = 0;
    while (index < length) {
      const match = reBlankLine.exec(value.slice(index));

      if (match == null) {
        break;
      }
      if (silent) {
        return true;
      }
      // debugger;
      const line = match[0];
      index += line.length;

      const add = eat(line);
      // NOTE if we are at start we add break for each line
      // otherwise we ignore first line as it's newline of previous block
      if (this.atStart === true || eatenLines > 0) {
        add({ type: 'break' });
      }
      eatenLines++;
    }
  }
}

function isRemarkParser(parser: ParserConstructor | ParserFunction) {
  return (
    parser != null &&
    parser.prototype != null &&
    parser.prototype.blockTokenizers != null
  );
}

type Tokenizer = {
  atStart: boolean;
  inBlock: boolean;
  inLink: boolean;
  inList: boolean;
};

const Show = ({content}: {content: string}) => {
  return(
    <ReactMarkdown
      plugins={[blankLines]}
      children={content}
    />
  )
}

[wooorm]

@quolpr glad it worked for you, but that’s not a good solution: it doesn’t work with the current react-markdown and so folks copy-pasting it will be at a loss, so I’ll hide it.

Empty lines in markdown or HTML don’t do anything. Use code. Or don‘t use Markdown and use CSS.

Furthermore this issue is about something else