1

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
Rahul
  • 5,594
  • 7
  • 38
  • 92
  • That doesn't look like a valid JavaScript string to me. Do you mean to use a template literal, with backticks? Please [edit] a syntactically valid input string into your question. – ChrisGPT was on strike Apr 24 '22 at 15:29
  • @Chris I've updated the question with Valid JS String. Sharing here as well: "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" – Rahul Apr 24 '22 at 15:49
  • @Chris I made it work. Used this logic: replaced /\n\n(?=\n)/g with '\n\n' and CSS display: block; padding-bottom: 1.5rem; – Rahul Apr 24 '22 at 16:03
  • Thanks @Chris for your valuable time :) – Rahul Apr 24 '22 at 16:07

1 Answers1

0

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; 
}
Rahul
  • 5,594
  • 7
  • 38
  • 92