Appearance

Markdown ​

Converts markdown input to valid HTML for email

Install ​

Install the component from your command line

console
pnpm add jsx-email
pnpm add jsx-email
console
bun add jsx-email
bun add jsx-email
console
npm add jsx-email
npm add jsx-email
console
yarn add jsx-email
yarn add jsx-email

Usage ​

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

jsx
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>
  );
};
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 ​

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

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

ts
markdownContainerStyles?: React.CSSProperties;
markdownContainerStyles?: React.CSSProperties;

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

ts
markdownCustomStyles?: StylesType;
markdownCustomStyles?: StylesType;

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

TIP

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