Markdown
Formance-styled markdown renderer (GFM, code blocks, tables, math, mermaid) with an overridable component map.
A Formance-styled markdown renderer built on react-markdown. Pass a markdown string as children and it renders headings, prose, lists, links, tables, and code blocks with the design system's tokens and typography. Fenced code blocks route through CodeSnippet (Shiki) and inline code stays lightweight.
Out of the box it supports GitHub Flavored Markdown (remark-gfm), math (remark-math + rehype-katex), and ```mermaid diagrams (loaded lazily). Every element renderer is overridable through the components prop, which is merged over the defaults — override one tag without losing the rest. The same map is exported as markdownComponents so you can reuse the styling in your own react-markdown (or streamdown) instance.
import { Markdown } from '@/components/ui-fragments/markdown';
<Markdown>{`# Hello\n\nSome **markdown** with a [link](https://formance.com).`}</Markdown>;GitHub Flavored Markdown#
Tables, task lists, strikethrough, and autolinks via remark-gfm.
Code blocks#
Fenced blocks render through CodeSnippet (Shiki); unknown languages fall back to plain text.
Extending the component map#
Pass a components map to override or inject custom renderers. It is merged over the defaults, so the rest of the elements keep their styling.
Math (KaTeX)#
Inline ($…$) and block ($$…$$) math via remark-math and rehype-katex.
Mermaid diagrams#
A ```mermaid fence renders as a diagram. The mermaid bundle is code-split and only loaded when a diagram is present.
Compound Components
Compose the pieces you need:
<Markdown />Renders a markdown string with Formance styling. Accepts a `components` prop merged over the defaults.<markdownComponents />The reusable element→component map. Spread it into react-markdown or streamdown to reuse the styling elsewhere.