​
Install

Install the component from your command line.

​
Getting Started

Add the component into your email component as follows.

import { CodeBlock, dracula } from '@react-email/code-block';

const Email = () => {
  const code = `export default async (req, res) => {
  try {
    const html = await renderAsync(
      EmailTemplate({ firstName: 'John' })
    );
    return NextResponse.json({ html });
  } catch (error) {
    return NextResponse.json({ error });
  }
}`;

  return (<CodeBlock
    code={code}
    lineNumbers // add this so that there are line numbers beside each code line
    theme={dracula}
    language="javascript"
  />);
};

This should render a code-block with the desired theme.

​
Theming

Themes for this component are basically a set of styles for each kind of token that can result from prismjs’s tokenization. See here for more information on the tokens available.

An example of a theme would be this:

{
  "base": {
    "color": "#f8f8f2",
    "background": "#282a36",
    "textShadow": "0 1px rgba(0, 0, 0, 0.3)",
    "fontFamily": "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
    "textAlign": "left",
    "whiteSpace": "pre",
    "wordSpacing": "normal",
    "wordBreak": "normal",
    "wordWrap": "normal",
    "lineHeight": "1.5",
    "MozTabSize": "4",
    "OTabSize": "4",
    "tabSize": "4",
    "WebkitHyphens": "none",
    "MozHyphens": "none",
    "MsHyphens": "none",
    "hyphens": "none",
    "padding": "1em",
    "margin": ".5em 0",
    "overflow": "auto",
    "borderRadius": "0.3em"
  },
  "comment": {
    "color": "#6272a4"
  },
  "prolog": {
    "color": "#6272a4"
  },
  "doctype": {
    "color": "#6272a4"
  },
  "cdata": {
    "color": "#6272a4"
  },
  "punctuation": {
    "color": "#f8f8f2"
  },
  "property": {
    "color": "#ff79c6"
  },
  // ...
}

Each token type can have their own defined styles and for each one of there can be any styles that can be applied directly to React elements. As you can see from the example dracula theme though, there is a defined property called base which is the styling for the pre element that wraps the HTML being rendered.

For you to not need to defined a theme without any basis, or to not define one that already has been defined, we have many default themes exported from @react-email/code-block. These themes were generated by a bit of code that converts a CSS file for a prismjs theme into a object theme of these. If you want to generate a theme from another existing prismjs theme you can do so by looking into this.

​
Props

lineNumbers
boolean

Whether or not to automatically include line numbers on the rendered code block

fontFamily
string

The font family value to go into the fontFamily: "..." style for all used elements of the component

theme
Theme
required

An object representation of a PrismJS CSS theme

language
string
required

The language under the supported languages defined in PrismLanguage

code
string
required

The actual code to render in the code block. Just a plain string, with the proper identation included.

​
Support

All components were tested using the most popular email clients.

Gmail

Apple Mail

Outlook

Yahoo! Mail

HEY

Superhuman

ContainerCode Inline