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: #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

[siri404]

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

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

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