Markdown

Support

Client-side
Server-side

Examples

Preview

import { Markdown } from "@onedoc/react-print";

<Markdown>{`# Hello, world!

> This is a blockquote

---

This is a paragraph with a [link](https://google.com)`}</Markdown>;

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.

import { Markdown } from "@onedoc/react-print";

<Markdown
  options={{
    overrides: {
      Title: {
        component: () => "Non-Disclosure Agreement",
      },
      CustomerName: {
        component: () => "John Doe",
      },
      KPI: {
        component: ({ children }) => (
          <div style={{ color: "blue", fontSize: "2rem" }}>{children}</div>
        ),
      },
    },
  }}
>{`# <Title />

This agreement is signed with <CustomerName />.

<KPI>20/month</KPI>`}</Markdown>;