markdown-to-jsx icon indicating copy to clipboard operation
markdown-to-jsx copied to clipboard

Double line breaks (\n\n) are not converted properly

Open sdeep27 opened this issue 1 year ago • 3 comments

If i write a text string "Hello\n\nHow are you?"
I expect: Hello

How are you?

Instead markdown-to-jsx converts it to: Hello How are you?

I am specifically using this with a streaming response from an AI LLM which outputs line breaks as \n and usually \n\n between paragraphs but it is markdown-to-jsx is not conserving it. If I try to replace instances of \n with < br / > tag it will create the line break properly but it will break markdown elsewhere in the output.

sdeep27 avatar May 14 '24 17:05 sdeep27

I fixed it with the option forceInline along with the css property white-space: pre-wrap :

import MarkdownToJsx from 'markdown-to-jsx'

<span style={{ whiteSpace: 'pre-wrap' }}>
    <MarkdownToJsx
        options={{
            forceInline: true,
        }}>
        {"Hello\n\nHow are you?"}
    </MarkdownToJsx>
</span>

I don't really know why does this work tho

vincentDen avatar May 30 '24 07:05 vincentDen

I fixed it with the option forceInline along with the css property white-space: pre-wrap :

import MarkdownToJsx from 'markdown-to-jsx'

<span style={{ whiteSpace: 'pre-wrap' }}>
    <MarkdownToJsx
        options={{
            forceInline: true,
        }}>
        {"Hello\n\nHow are you?"}
    </MarkdownToJsx>
</span>

I don't really know why does this work tho

thank for save my work, thats work 🤩

zaadevofc avatar Jun 24 '24 03:06 zaadevofc

Unfortunately if you do forceInline: true this disables all block rendering like tables and lists. Would be good if there was a better workaround/fix

cloudkite avatar Oct 30 '24 22:10 cloudkite