Code

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

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

CodeExample.jsx

import { Code } from 'jsx-email';

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

        const henchmen = joker.help();

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

Props

Required Props

language

language: string;

Syntax highlighting language. See shiki supported languages.

Optional Props

theme

theme?: string;

Color theme for syntax highlighting. Defaults to 'nord'. See shiki themes documentation.

Additional Props

This component also expresses all of the Common Component Props for ComponentProps<'pre'>.