Shiki">

Appearance

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

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