CODEWITHSUNDEEP
markdown
madesch
madesch

Reputation: 2683

How to insert a line break <br> in markdown

I'm trying to create a Markdown file with some paragraphs containing both a link and a line of text on the next line. The problem I've encountered is that when I make a new line after the link, it is rendered with a separate <p> tag.

My Markdown is the following:

[Name of link](url)

My line of text

Which is rendered to the following HTML:

<p>
   <a href="url">Name of link</a>
</p>
<p>My line of text</p>

Instead I want it to render like so:

<p>
    <a href="url">Name of link</a><br>  // not necessarily with a <br> tag but on a separate line
    My line of text
</p>

I've also tried using a single line break in the Markdown:

[Name of link](url)
My line of text

But then both the link and the text is rendered on the same line, but without a line break.

Any suggestions on how to solve this?

Upvotes: 258

Views: 438895

Answers (5)

Gangula
Gangula

Reputation: 7254

Combining answers from multiple sources, there are mainly 3 ways to add a line break in Markdown:

1. Backslash (\)

Add a backslash at the end of a line like this:

Markdown Input HTML Output HTML Preview
Test line\
Test line 2		 
<p>Test line<br>Test Line 2</p>
 Test line
Test line 2

Warning: doesn't work with all engines.

2. HTML <br> tag

A lot of HTML tags are directly supported in Markdown.
Add a HTML <br> or <br/> tag at the end of a line like this:

Markdown Input HTML Output HTML Preview
Test line<br>
Test line 2		 
<p>Test line<br>
Test Line 2</p>
 Test line
Test line 2

3. Two spaces

Add 2 spaces at the end of a line like this:

Markdown Input HTML Output HTML Preview
Test line
Test line 2		 
<p>Test line<br>Test Line 2</p>
 Test line
Test line 2

Note: trailing spaces are "risky" (invisible, some text editors will remove them...).

Option3.2 for whitespace - if you would like to be able to see the spaces while editing markdown source, add \s instead of whitespace( ) | Test line
Test line 2 | 

<p>Test line<br>Test Line 2</p>
| Test line
Test line 2 |

Note: Option3.2 doesn't seem to work properly, but this is documented in the markdown guide

Test line\s\s
Test line 2

Upvotes: 47

majidarif
majidarif

Reputation: 19975

Try adding 2 spaces (or a backslash \) after the first line:

[Name of link](url)
My line of text\

Visually:

[Name of link](url)<space><space>
My line of text\

Output:

<p><a href="url">Name of link</a><br>
My line of text<br></p>

Alternatively you can place a <br> directly into the text. It is valid in Markdown.

Upvotes: 404

Ilia Popivanov
Ilia Popivanov

Reputation: 379

After a long search, I found this solution:

\
&nbsp;
\
&nbsp;

This will produce:

<br> <br>

Upvotes: 34

Chukwuemeka Maduekwe
Chukwuemeka Maduekwe

Reputation: 8526

Just adding a new line worked for me if you're to store the markdown in a JavaScript variable. like so

let markdown = `
    1. Apple
    2. Mango
     this is juicy
    3. Orange
`

Upvotes: 0

Scott G
Scott G

Reputation: 855

I know this post is about adding a single line break but I thought I would mention that you can create multiple line breaks with the backslash (\) character:

Hello
\
\
\
World!

This would result in 3 new lines after "Hello". To clarify, that would mean 2 empty lines between "Hello" and "World!". It would display like this:

Hello



World!


Personally I find this cleaner for a large number of line breaks compared to using <br>.

Note that backslashes are not recommended for compatibility reasons. So this may not be supported by your Markdown parser but it's handy when it is.

Upvotes: 59

Related Questions