ComponentsMarkdown

Markdown

Support

Client-side

Server-side

Preview

Use a simple Markdown tag to support Markdown in your document.

1 import { Markdown } from "@fileforge/react-print";
2 
3 <Markdown>{`# Hello, world!
4 
5 > This is a blockquote
6 
7 ---
8 
9 This is a paragraph with a [link](https://google.com)`}</Markdown>;

Examples

Custom Components and Variables

You can leverage the overrides prop to replace Markdown components with your own components. This is useful for custom components or even for dynamic content.

1 import { Markdown } from "@fileforge/react-print";
2 
3 <Markdown
4   options={{
5     overrides: {
6       Title: {
7         component: () => "Non-Disclosure Agreement",
8       },
9       CustomerName: {
10         component: () => "John Doe",
11       },
12       KPI: {
13         component: ({ children }) => (
14           <div style={{ color: "blue", fontSize: "2rem" }}>{children}</div>
15         ),
16       },
17     },
18   }}
19 >{`# <Title />
20 
21 This agreement is signed with <CustomerName />.
22 
23 <KPI>20/month</KPI>`}</Markdown>;

1	import { Markdown } from "@fileforge/react-print";
2
3	<Markdown>{`# Hello, world!
4
5	> This is a blockquote
6
7	---
8
9	This is a paragraph with a [link](https://google.com)`}</Markdown>;

1	import { Markdown } from "@fileforge/react-print";
2
3	<Markdown
4	options={{
5	overrides: {
6	Title: {
7	component: () => "Non-Disclosure Agreement",
8	},
9	CustomerName: {
10	component: () => "John Doe",
11	},
12	KPI: {
13	component: ({ children }) => (
14	<div style={{ color: "blue", fontSize: "2rem" }}>{children}</div>
15	),
16	},
17	},
18	}}
19	>{`# <Title />
20
21	This agreement is signed with <CustomerName />.
22
23	<KPI>20/month</KPI>`}</Markdown>;