react-markdown don´t render Markdown

Question

I'm using react-markdown to render a value of an input. The problem is that the reduction is not being processed as it should be, for example if I use this expression " # hello world ", the text should be displayed as text in h1, but it displays it normally, as well as other expressions cannot be performed.

//setDataForm coming from parent 
//const [dataForm, setDataForm] = useState()

const NoteForm = ({setDataForm})=> {
   const handleChange = (e) => {
        const { name, value } = e.target
        setDataForm({
            ...dataForm,
            [name]: value
        })
   }

   <textarea
     placeholder="Description"
     onChange={handleChange}
     name="description"
   ></textarea>

   <ReactMarkdown
     className="w-full h-[100vh] outline-none"
     children={dataForm?.description}
     remarkPlugins={[remarkGfm]}
     escapeHtml={false}
   />
}

Answer 1

The problem here is that React-markdown map the markdown text to real html elements, and you're using tailwindcss.

Tailwind takes out all default styles applied to html elements. Luckily there is a really easy workaround:

.markdown > * {
  all: revert;
}

Create a class like this in your "index.css" file that contains your tailwind directives. After that, just put "markdown" in the ReactMarkdown component classes and you're good to go.

Answer 2

You can try this:

First you have install

$ yarn add remark-gfm

then

<ReactMarkdown
  className={styles.markdown}
  remarkPlugins={[remarkGfm]}
>
  {content}
</ReactMarkdown>

where style.markdown is

@import 'mixins';

.markdown {
  table {
    border-collapse: collapse;
  }

  th,
  td {
    padding: 6px 13px;
    border: 1px solid black;
  }

  p {
    line-height: 1.5;
  }
}

The result:

Answer 3

I had a similar issue and adding and the solutions above did not work for my use case since my markdown contained some HTML tags like <u> </u> etc in it. so I resulted to adding rehype-raw plugin to my ReactMarkdown. npm install rehype-raw

import rehypeRaw from 'rehype-raw';
import ReactMarkdown from 'react-markdown';

<ReactMarkdown  
rehypePlugins={[rehypeRaw]}>
        {description}
 </ReactMarkdown>

Answer 4

I see that you are using tailwindcss to style HTML that you don't control. With tailwindcss, you can use @tailwindcss/typography.

It allows you to style it however you like using the prose class.