Shiki">

Appearance

Code ​

An Email Craft 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 install email-craft
pnpm install email-craft
console
bun install email-craft
bun install email-craft
console
npm install email-craft
npm install email-craft
console
yarn install email-craft
yarn install email-craft

Usage ​

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

jsx
import { Code } from 'email-craft';

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 'email-craft';

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