Markdown

Converts markdown input to valid HTML for email

pnpm

aube

bun

npm

yarn

pnpm add jsx-email

Usage

Add the component to your email template. Include styles where needed.

import { Html, Markdown } from 'jsx-email';

const Email = () => {
  return (
    <Html lang="en" dir="ltr">
      <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~~`} />
    </Html>
  );
};

Component Props

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

children: string | string[];

Contains the markdown content that will be rendered in the email template

markdownContainerStyles?: React.CSSProperties;

Provide custom styles for the containing div that wraps the markdown content

markdownCustomStyles?: StylesType;

Provide custom styles for the corresponding html element (p, h1, h2, etc.)

Tips

Note: Passing a custom style for an element overrides the default styles.