React-markdown: How does the styling work?

[JikkuJose]

There seems to be no mention about it? The demo code seems to be too cryptic!

[rexxars]

There isn't any styling by default. react-markdown just renders semantic markup, then it's up to the developer to apply styles to those. I'll flag this for clarity in v3's readme.

[JikkuJose]

Thanks, just wondering about an idea. How complicated is it to add classes to the rendered elements using props like so:

tagClasseNames={{
  h1: 'custom-head',
  p: 'custom-p'
}}

[rexxars]

That would work, but every custom renderer would have to respect the class names. It also adds to an API that I'm hoping to keep fairly small. If you really need this, you could always just override the default renderers.

[stahlmanDesign]

I installed this module with npm https://github.com/sindresorhus/github-markdown-css
and I import it like this
import 'github-markdown-css' <-- it finds the css in node_modules

Then wrap your markdown with the className 'markdown-body' used by the css

<div className='markdown-body'>
  <ReactMarkdown source='# hello'/>
</div>

This styles the th td table etc like github markdown

[Taskkill]

@rexxars

There isn't any styling by default. react-markdown just renders semantic markup, then it's up to the developer to apply styles to those. I'll flag this for clarity in v3's readme.

Can you please put it in the README? Idk if it was in previous versions, but it is not in current readme.
Honestly confused me a lot at first, I'll admit I do not have much knowledge about MarkDown so it didn't hit me immediately that it renders only semantic markup. Anyways thank you.

[OlivierJM]

I installed this module with npm https://github.com/sindresorhus/github-markdown-css
and I import it like this
import 'github-markdown-css' <-- it finds the css in node_modules

Then wrap your markdown with the className 'markdown-body' used by the css

<div className='markdown-body'>
  <ReactMarkdown source='# hello'/>
</div>

This styles the th td table etc like github markdown

This fixed my issue, thanks a lot.

[tnrich]

@rexxars
If you could link to this issue and the fix @stahlmanDesign mentioned above in the README that would be awesome!

[wooorm]

@tnrich The web is made up of JS, HTML, and CSS. We use JS to turn Markdown into HTML. Similar to how React doesn’t style your website like GitHub, we don’t either. There is nothing in this project tied to GitHub, which is what github-markdown-css does. So, blessing it by putting it in the readme makes no sense to me. Instead, have fun, be creative, and make your content fancy with your own CSS!