How to mark end of blockquote in markdown - react-markdown

1.6k views Asked by At

I've following markdown:

"Line0 

Line1

Line2

> 1
> 
> 2
> 
> 3
> 
> 4
> 
> 5
> 
> 6



line end"

I am using react-markdown to render this in UI. But new lines after then end of blockquotes are getting included in blockquote. https://www.npmjs.com/package/react-markdown

I tried several ways to make it work but none of the ways worked for me.

What I've tried:

  1. Replacing /n with double space
  2. Replacing /n with backslash \
  3. Replacing /n with
  4. Replacing /n with

No matter what I do, all the new lines after end of the blockquote are getting included in blockquote.

What I am getting:

enter image description here

HTML

enter image description here

Expected Output enter image description here

Any help on this will be really appreciated.

EDIT:

Here is the markdown string as in Markdown:

Line0\n\n\n\nLine1\n\n\n\n\n\nLine2\n\n> 1\n> \n> 2\n> \n> 3\n> \n> 4\n> \n> 5\n> \n> 6\n\n\n\n\n\n\n\n\n\nline end\n\n\n\n\n\n\n\n4\n\n\n\n\n\n\n\n\n\n5
1

There are 1 answers

0
Rahul On

Following changes worked for me:

const REG_EX = /\n\n(?=\n)/g;
const NEW_LINE_REPLACEMENT = '\n\n<span className="line-break"></span>';

transformedString = markdownString.replace(REG_EX, NEW_LINE_REPLACEMENT);


CSS
.line-break {
    display: block; 
    padding-bottom: 1.5rem; 
}