Code

A JSX email component which displays a syntax-highlighted code block using Shiki

pnpm add jsx-email

aube add jsx-email

bun add jsx-email

npm add jsx-email

yarn add jsx-email

Usage

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

import { Code } from 'jsx-email';

const Email = () => {
  return (
    <Code>
      {`
      import { batman } from 'superheros';
      import { joker } from 'villains';

      const henchmen = joker.help();

      batman.fight(henchmen);
      batman.arrest(joker);
    `}
    </Code>
  );
};

Component Props

language: string;

Specifies the language to use for the highlighter. See the shiki documentation for more information on supported languages.

theme?: string;

Optional. Defaults to 'nord'. Specifies the theme to use for the highlighter. See the shiki documentation for more information on supported themes, modifying themes, and how to make your own.