Skip to content

## Markdown ​

Converts markdown input to valid HTML for email

## Install ​

Install the component from your command line

pnpmbunnpmyarn
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.