Shiki">
Skip to content

## Code ​

A JSX email component which displays a syntax-highlighted code block using <a href="https://shiki.matsu.io/">Shiki</a>

## Install ​

Install the 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 { 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>
      );
    };

    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 ​

ts

    language: string;

    language: string;

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

ts

    theme?: string;

    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.

TIP

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