# Markdown

> Markdown components for displaying markdown content with custom styles.

Web: https://react.email/components/markdown

Paste any snippet into an email built with React Email. The snippets use the primitives from `@react-email/components`.

## Simple markdown

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/simple-markdown

### React

```tsx
<Markdown>
  {`## Hello, this is my email template

This is meant to be rendered as a paragraph. There is no way around it.

### Another heading that I wrote
      `}
</Markdown>
```

## Markdown with container styles

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/markdown-with-container-styles

### React

```tsx
<Markdown
  markdownContainerStyles={{
    marginBlock: 30,
  }}
>
  {`## Hello, this is my email template

This is meant to be rendered as a paragraph. There is no way around it.

### Another heading that I wrote
      `}
</Markdown>
```

## Markdown with custom styles

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/markdown-with-custom-styles

### React

```tsx
<Markdown
  markdownCustomStyles={{
    h1: { color: 'red' },
    h2: { color: 'blue' },
    codeInline: { background: 'grey' },
  }}
>
  {`## Hello, this is my email template

This is meant to be rendered as a paragraph. There is no way around it.

### Another heading that I wrote
      `}
</Markdown>
```