> ## Documentation Index
> Fetch the complete documentation index at: https://react.email/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Code Block

> Display code with a selected theme and regex highlighting using Prism.js.

## Install

Install the component from your command line.

```sh npm theme={"theme":{"light":"github-light","dark":"vesper"}}
npm install react-email -E
```

```sh yarn theme={"theme":{"light":"github-light","dark":"vesper"}}
yarn add react-email -E
```

```sh pnpm theme={"theme":{"light":"github-light","dark":"vesper"}}
pnpm add react-email -E
```

## Getting Started

Add the component into your email component as follows.

```jsx theme={"theme":{"light":"github-light","dark":"vesper"}}
import { CodeBlock, dracula } from 'react-email';

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](https://prismjs.com/tokens.html) for more information on the tokens available.

An example of a theme would be this:

```json theme={"theme":{"light":"github-light","dark":"vesper"}}
{
  "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`.
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](https://github.com/gabrielmfern/from-prismjs-to-react-email-code-block-theme).

## 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 indentation included.

## Support

All components were tested using the most popular email clients.

![Gmail](https://react.email/static/icons/gmail.svg)

Gmail

![Apple Mail](https://react.email/static/icons/apple-mail.svg)

Apple Mail

![Outlook](https://react.email/static/icons/outlook.svg)

Outlook

![Yahoo! Mail](https://react.email/static/icons/yahoo-mail.svg)

Yahoo! Mail

![HEY](https://react.email/static/icons/hey.svg)

HEY

![Superhuman](https://react.email/static/icons/superhuman.svg)

Superhuman


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.