Adding multiple line break in react-markdown

Question

Currently I'm using React and have content in my rich text in strapi CMS that is spaced out the way I want it in my markdown version, but as soon as I switch to preview, or view the content in my browser, the spaces go away. I have tried adding <br/> tags, but there was still no line breaks.

This is the content in my strapi markdown:

But this is the output on my webpage:

This is my current code:

import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";
export default function name({ posts }) {
  return (
    <>
        <div>
          {posts.Title}
        </div>
      <div>
        <ReactMarkdown children={posts.Content} rehypePlugins={[rehypeRaw]} />
      </div>
    </>
  );
}

Costanzo

Does this solve your issue? github.com/remarkjs/react-markdown/issues/273 – Plyler

@Plyler no so I have tried adding   at the end of a line and \n as well but both didn't give me the output – Costanzo

Answer 1

For adding multiple line break, this should do it:

import React from "react";
import "./styles.css";

import ReactMarkdown from "react-markdown";

export default function App() {
  const markdown = `hello
  \n  
  \n  
  \n  
  \n  
  \n
  world
  `;

  return (
    <div className="App">
      <ReactMarkdown source={markdown} />
    </div>
  );
}

Lip

saved my day. Was struggling to add extra space. Your solution is precise. – Macroscopic

Answer 2

use remark-breaks

and replace \n with   \n. if one \n doesn't work, try adding one more

import remarkBreaks from "remark-breaks";

//...

<ReactMarkdown 
  remarkPlugins={[remarkBreaks]}
  rehypePlugins={[rehypeRaw]}
  children={posts.Content.replace(/\n/gi, "&nbsp; \n")}
/>

Barbuto

this works nice with spaces but it breaks some of my other tags. <code/> having   at the start and finish and the <ul> list not displaying the dots. Every <li> has a <br> in between. How to fix these? – Gallia

Thanks. <ReactMarkdown remarkPlugins={[remarkBreaks]}>{recommendation}</ReactMarkdown> worked for me. I just needed to check my SCSS rules and make sure I wasn't doing weird stuff with p margins. – Kommunarsk

@Gallia change the replace to .replace(/\n/gi, "\n   \n"). Won't break li and ul stuff – Leong

Answer 3

Even after adding the remarkBreaks remarkPlugins, ReactMarkdown still does not produce multiple line breaks for \n\n, instead turning them into single line breaks. This is not the best solution, but I had to use this approach to resolve the issue, as there are no options to configure the package or plugins to detect \n\n as multiple line breaks.

I am able to make it work by configuring the component in the following way:

import ReactMarkdown, { ExtraProps } from 'react-markdown'
import remarkBreaks from 'remark-breaks'

const code = ({
  className,
  children,
}: React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & ExtraProps) => {
  const _children = children && (children as string)
  if (!_children) return null
  return <code className={className}>{_children.replace(/&nbsp;/g, '')}</code>
}

type MarkdownProps = {
  className?: string
  children: string
}

export const Markdown = (props: MarkdownProps) => {
  const { className, children } = props
  return (
    <ReactMarkdown
      remarkPlugins={[remarkBreaks]}
      components={{
        code: code,
      }}
      className={className}>
      {children}
    </ReactMarkdown>
  )
}

Raw payload

"Sure! Here's an example of a simple React functional component that renders a greeting:\n\njsx\nimport React from 'react';\n\nfunction Greeting({ name }) {\n return <div>Hello, {name}!</div>;\n}\n\nexport default Greeting;\n\n\nIn this example, the Greeting component takes a name prop and displays a greeting message. You can use this component by importing it and passing a name prop.\n\nIs there anything specific you would like to know about React components?"

Output

Sure! Here's an example of a simple React functional component that renders a greeting:
 

import React from 'react';

function Greeting({ name }) {
  return <div>Hello, {name}!</div>;
}

export default Greeting;
 
In this example, the Greeting component takes a name prop and displays a greeting message. You can use this component by importing it and passing a name prop.
 
Is there anything specific you would like to know about React components?

CodeSandbox

Straitlaced