Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

\n Doesn't work properly #818

Closed
4 tasks done
sash20m opened this issue Feb 22, 2024 · 8 comments
Closed
4 tasks done

\n Doesn't work properly #818

sash20m opened this issue Feb 22, 2024 · 8 comments
Labels
🙋 no/question This does not need any changes 👎 phase/no Post cannot or will not be acted on

Comments

@sash20m
Copy link

sash20m commented Feb 22, 2024

Initial checklist

Affected packages and versions

^9.0.1

Link to runnable example

https://stackblitz.com/edit/github-mmihct?file=src%2Fapp.tsx

Steps to reproduce

Install react-markdown and add as mardown the string "abc\nabc" or any other with the \n. It only makes a blank space between the words. If I added two \n then there will be a new line, but if I added 3 or 4 \n, also it remains only at one new lines.
I tried it in a fresh react app, and implemented it exactly as said in docs.

function App() {
  return (
    <div className="App">
      <MarkdownText markdown={"dasd\ndsad"} />
    </div>
  );
}

const MarkdownText = ({ markdown }) => {
  return <Markdown>{markdown}</Markdown>;
};
image
@github-actions github-actions bot added 👋 phase/new Post is being triaged automatically 🤞 phase/open Post is being triaged manually and removed 👋 phase/new Post is being triaged automatically labels Feb 22, 2024
@JounQin
Copy link
Member

JounQin commented Feb 22, 2024

Please provide minimal but runnable online reproduction.

@sash20m
Copy link
Author

sash20m commented Feb 22, 2024

Please provide minimal but runnable online reproduction.

https://stackblitz.com/edit/github-mmihct?file=src%2Fapp.tsx

@JounQin
Copy link
Member

JounQin commented Feb 22, 2024

This is how markdown works?

image

@JounQin JounQin closed this as not planned Won't fix, can't repro, duplicate, stale Feb 22, 2024

This comment has been minimized.

@JounQin JounQin added 🙋 no/question This does not need any changes and removed 🤞 phase/open Post is being triaged manually labels Feb 22, 2024

This comment has been minimized.

@github-actions github-actions bot added the 👎 phase/no Post cannot or will not be acted on label Feb 22, 2024
@ChristianMurphy
Copy link
Member

Welcome @sash20m! 👋
Sorry you ran into some confusion.

As @JounQin mentioned that is how markdown works.
If you want an alternative behavior for newline you can use plugins like https://github.com/remarkjs/remark-breaks

@remcohaszing
Copy link
Member

As @JounQin stated, this is how markdown works.

I don’t recommend it, but if you insist on turning single newlines into line breaks, you can use remark-breaks.

@sash20m
Copy link
Author

sash20m commented Feb 22, 2024

As @JounQin stated, this is how markdown works.

I don’t recommend it, but if you insist on turning single newlines into line breaks, you can use remark-breaks.

I was under the impression its relation to \n is the same as any string. I have a long text with \n's and react-markdown fails to add new lines properly to the component.

I'll look at the plugin mentioned above, thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🙋 no/question This does not need any changes 👎 phase/no Post cannot or will not be acted on
Development

No branches or pull requests

4 participants