Markdown

Converts markdown input to valid HTML for email

Install

Install the component from your command line

pnpm

pnpm add jsx-email

bun

bun add jsx-email

npm

npm add jsx-email

yarn

yarn add jsx-email

Usage

MarkdownExample.jsx

import { Markdown } from 'jsx-email';

const Email = () => {
  return (
    <Markdown
      markdownCustomStyles={{
        h1: { color: 'red' },
        h2: { color: 'blue' },
        codeInline: { background: 'grey' }
      }}
      markdownContainerStyles={{
        padding: '12px',
        border: 'solid 1px black'
      }}
    >{`# Hello, World!`}</Markdown>

    {/* OR */}

    <Markdown children={`# This is a ~~strikethrough~~`} />
  );
};

Style Override

Custom styles override default styles for their respective elements.

Props

TypeScript Interface

export interface MarkdownProps {
  children: string;
  markdownContainerStyles?: React.CSSProperties;
  markdownCustomStyles?: StylesType;
}

Required Props

children

children: string | string[];

Markdown content to render in the email.

Optional Props

markdownContainerStyles

markdownContainerStyles?: React.CSSProperties;

Custom styles for the markdown container div.

markdownCustomStyles

markdownCustomStyles?: StylesType;

Custom styles for specific markdown elements.