Create <CodeBlock /> component #1003

zenorocha · 2023-10-30T22:02:25Z

zenorocha
Oct 30, 2023
Maintainer

Goals

Enable users to show code with syntax highlight on their emails instead of having to take a screenshot

Background

Might be worth taking a look at prism-react-rendererIt might

Proposal

import { Html } from '@react-email/html';
import { CodeBlock } from '@react-email/code-block';

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

  return (
    <Html lang="en">
      <CodeBlock code={code} language="typescript" theme="dracula" />
    </Html>
  );
};

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Create <CodeBlock /> component #1003

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Create <CodeBlock /> component #1003

Uh oh!

zenorocha Oct 30, 2023 Maintainer

Goals

Background

Proposal

Replies: 0 comments

zenorocha
Oct 30, 2023
Maintainer