Skip to main content
Display code with a selected theme and regex highlighting using Prism.js.

​
Installation

npm install @react-email/code-block -E

​
Usage

Add the component to your email template. 
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
      theme={dracula}
      language="javascript"
    />
  );
};

​
Props

​
code
string
required
The code string to display
​
language
PrismLanguage
required
The programming language for syntax highlighting (e.g., "javascript", "typescript", "python", "html", etc.)
​
theme
Theme
required
The theme object for styling. Import built-in themes from @react-email/code-block like dracula, github, monokai, etc.
​
lineNumbers
boolean
default:"false"
Whether to display line numbers beside each code line
​
fontFamily
string
Override the font family for the code block. Useful when using a global font with the <Font> component
​
style
React.CSSProperties
Additional inline styles for the pre element

​
Theming

Themes for this component are a set of styles for each kind of token that results from Prism.js’s tokenization. An example theme structure: 
{
  "base": {
    "color": "#f8f8f2",
    "background": "#282a36",
    "fontFamily": "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
    "fontSize": "14px",
    "lineHeight": "1.5",
    "padding": "1em",
    "borderRadius": "0.3em"
  },
  "comment": {
    "color": "#6272a4"
  },
  "string": {
    "color": "#f1fa8c"
  },
  "keyword": {
    "color": "#ff79c6"
  }
  // ... more token styles
}

​
Built-in Themes

The package includes several pre-built themes that you can import:
  • dracula
  • github
  • monokai
  • And more…
import { CodeBlock, dracula, github, monokai } from "@react-email/code-block";

​
TypeScript

export interface CodeBlockProps extends React.ComponentPropsWithoutRef<'pre'> {
  lineNumbers?: boolean;
  fontFamily?: string;
  theme: Theme;
  language: PrismLanguage;
  code: string;
}

​
Email Client Support

This component was tested using the most popular email clients.
GmailApple MailOutlookYahoo! MailHEYSuperhuman
✔✔✔✔✔✔

Build docs developers (and LLMs) love

Get started for freeTalk to us