mirror of
https://github.com/resend/react-email.git
synced 2026-09-14 14:18:02 +08:00
Gabriel Miranda
145 lines
3.7 KiB
Plaintext
145 lines
3.7 KiB
Plaintext
---
|
|
title: 'Code Block'
|
|
sidebarTitle: 'Code Block'
|
|
description: 'Display code with a selected theme and regex highlighting using Prism.js.'
|
|
icon: 'file-lines'
|
|
---
|
|
|
|
import Support from '/snippets/support.mdx'
|
|
|
|
## Install
|
|
|
|
Install the component from your command line.
|
|
|
|
<CodeGroup>
|
|
|
|
```sh npm
|
|
npm install react-email -E
|
|
```
|
|
|
|
```sh yarn
|
|
yarn add react-email -E
|
|
```
|
|
|
|
```sh pnpm
|
|
pnpm add react-email -E
|
|
```
|
|
|
|
</CodeGroup>
|
|
|
|
## Getting Started
|
|
|
|
Add the component into your email component as follows.
|
|
|
|
```jsx
|
|
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
|
|
{
|
|
"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
|
|
|
|
<ResponseField name="lineNumbers" type="boolean">
|
|
Whether or not to automatically include line numbers on the rendered code block
|
|
</ResponseField>
|
|
|
|
<ResponseField name="fontFamily" type="string">
|
|
The font family value to go into the `fontFamily: "..."` style for
|
|
all used elements of the component
|
|
</ResponseField>
|
|
|
|
<ResponseField name="theme" type="Theme" required>
|
|
An object representation of a PrismJS CSS theme
|
|
</ResponseField>
|
|
|
|
<ResponseField name="language" type="string" required>
|
|
The language under the supported languages defined in `PrismLanguage`
|
|
</ResponseField>
|
|
|
|
<ResponseField name="code" type="string" required>
|
|
The actual code to render in the code block. Just a plain string, with the proper indentation included.
|
|
</ResponseField>
|
|
|
|
<Support/>
|
|
|