Some Markdown elements do not render

[rr-codes]

Subject of the issue

Describe your issue here.

Some markdown elements such as headers and lists do not render.

This is not a place to ask questions. For that, go to discussions

Your environment

• OS: macOS 11.0.1
• Packages: react-markdown ^5.0.2, remark ^13.0.0, remark-gfm ^1.0.0
• Env: node v14.10.1, Safari v14.0.1

Steps to reproduce

Tell us how to reproduce this issue. Please provide a working and simplified example.

const parseMarkdown = (text: string): JSX.Element => <ReactMarkdown
  plugins={[remarkGfm]} children={text} />;

const text = `
## hello

* world
* goodbye
`

// ...
render() {
  return  <div> {parseMarkdown(text)} </div>
}

Expected behavior

What should happen?

hello should be a header, and the rest should be rendered as a list

Actual behavior

What happens instead?

The text is rendered as-is, with no formatting and with ## and * still present.

[wooorm]

Weird.

Pasting that text in here works fine: https://codesandbox.io/s/react-markdown-debug-9n4eg.

Can you reproduce there, or in some other way, what’s up?

[wooorm]

Also: <div {parseMarkdown(text)} </div> is not valid JSX 🤔

[rr-codes]

Also: <div {parseMarkdown(text)} </div> is not valid JSX 🤔

Whoops, forgot to add the closing first > when I was typing this into the comment here

[rr-codes]

@wooorm Oh it appears to be something in my CSS, since when I don't include my CSS file I can see it rendering properly. Any idea what it could be? I'm using TailwindCSS for reference

[lhennerley]

Also a similar issue I just tried to use this library 😄

I think it's more of a tailwind issue than an issue with this library, though - tailwind the default for list is list-none https://tailwindcss.com/docs/list-style-type

Looks like there needs to be some changes in the tailwind-config.js to handle this, perhaps.

[wooorm]

Alright! Searchinf through the issues for css might help!

[lhennerley]

Just to fix the issue - you can install the tailwind Typography plugin

https://tailwindcss.com/docs/typography-plugin

module.exports = {
    theme: {
    },
    variants: {},
    plugins: [
      require('@tailwindcss/typography')
    ]
}

You can then add the following:

<Markdown className='prose'>{markdownSource}</Markdown>

Adding className='prose' will tell tailwind to render the content - it looks something like this: