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}
   />
}

I'm sorry, I forgot to add it, but the information is received correctly, the problem is only with the display of the mardowns. — YCrhis, Nov 28 '22 at 23:10

score 11 · Accepted Answer · answered Nov 28 '22 at 23:12

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.

score 1 · Answer 2 · edited Apr 18 '23 at 21:47

1

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.

edited Apr 18 '23 at 21:47

Anindya Dey

825
1
8
18

answered Apr 13 '23 at 08:20

M1do

11
1

If you have a new question, please ask it by clicking the [Ask Question](https://stackoverflow.com/questions/ask) button. Include a link to this question if it helps provide context. - [From Review](/review/late-answers/34212836) – Dorian349 Apr 18 '23 at 14:55

score 0 · Answer 3 · answered Feb 07 '23 at 21:13

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:

react-markdown don´t render Markdown

3 Answers3

Linked