React-styleguidist: Custom React components for Markdown elements

[ryanoglesby08]

I'd like to be able to configure custom components that get used when rendering Markdown documentation blocks.

For example, I have a custom <Link> component and would like to render that for all hyperlinks in my documentation.

Raw Markdown: MyComponent.md
"You can find more information about the inspiration for this component [here](http://example.com)."

Compiled
"You can find more information about the inspiration for this component <Link href="http://example.com"> here </Link>.

I see that this is possible by completely replacing the Markdown.js component as described in the Cookbook and configuring HTML "a" tags to use my custom Link component.

Replacing the entire Markdown.js component feels dirty and dangerous and it is a very large component that has a lot of responsibilities.

I would prefer to be able to provide a custom mapping as configuration to react-styleguidist. Or if each element in Markdown.js is exposed as a separate component, I could override just the ones I want.

Have you considered these possibilities? Is replacing the Markdown.js file the way to go? I could also look at making a PR to add this capability.

Thanks for the great tool btw! I've used it on multiple projects now. :)

[sapegin]

Have you considered these possibilities? Is replacing the Markdown.js file the way to go? I could also look at making a PR to add this capability.

No, but it looks like a good idea and shouldn’t add a lot of complexity, so feel free to make a PR for that! ;-)

[ryanoglesby08]

Awesome! Will work on it.

[SaraVieira]

@sapegin Would be allowing a markdown parser the way to go ?

[sapegin]

@SaraVieira Not sure I understand what you mean here ;-|

[probablyup]

Not sure if @sapegin has it exposed, but markdown-to-jsx has this capability: https://github.com/probablyup/markdown-to-jsx

[ryanoglesby08]

Yep @probablyup the capability is not directly exposed to the consumer of react-styleguidist quite yet. I'm working through some PRs (#650 and #651 already merged) to introduce more components into the markdown parsing so that the consumer can specify their own.

The entire list of components to create is in this PR --> #619, if anyone else wants to help out!

(@probablyup Thanks for the awesome markdown-to-jsx library btw!)

[ryanoglesby08]

All Markdown elements now have corresponding React components in styleguidist, that can easily be overridden by consumers using normal aliases as is described in the documentation: https://react-styleguidist.js.org/docs/configuration.html#styleguidecomponents

Closing this issue now.

[sapegin]

@ryanoglesby08 Thank you for amazing work!! 🦄