Support markdown admonitions

[ericwb]

Describe the Custom Component
This isn't a request for a completely new component, more about adding a new feature to the markdown support.

Other frameworks such as Docusaurus and GitHub that support markdown, have also included support for admonitions. It would be great if Reflex also had this support as part of the markdown component.

• What is the purpose of the custom component?

To display warnings, notes, tips, caution, etc blocks to a markdown document.

• What is the expected behavior of the custom component?

For example in GitHub:

> [!CAUTION]
> Negative potential consequences of an action.

Renders as:

Caution

Negative potential consequences of an action.

• What are the use cases for the custom component?

To give attention to some information within a markdown document.

Specifics (please complete the following information):

• Do you have a specific react package in mind? (Optional):

There is this: https://github.com/nebrelbug/react-admonitions
but I don't know if that is the best option.

Additional context

Unfortunately, there is no standard for admonitions. Docusaurus uses different tags than GitHub. Mkdocs material UI also uses a different syntax.

Of course, if I completely missed it and Reflex does support admonitions, maybe a change to the docs should have mention of it.

https://reflex.dev/docs/library/typography/markdown/
https://github.com/orgs/community/discussions/16925
https://docusaurus.io/docs/markdown-features/admonitions
https://squidfunk.github.io/mkdocs-material/reference/admonitions/

[ericwb]

I guess this would be the markdown equivalent of Reflex's callouts (https://reflex.dev/docs/library/datadisplay/callout/)

[picklelo]

@ericwb Our markdown component is based on react markdown which has many plugins, there may be one to support this.

We also have an internal library called flexdown (that we're planning to release soon) that allows a mix of markdown and Reflex within your code. It allows for much more customizable pages than standard markdown - we use it for our interactive docs on our main website, e.g. our intro docs.