New Code Block Component

Improve how you display code in your emails.

Zeh FernandesZeh Fernandes

When it comes to email, one thing we've always hated is seeing code displayed as an image or screenshot instead of actual text.

It's not only annoying but also inaccessible because you can't copy the code or search.

We've seen this happen a lot, and that's why we decided to build the <CodeBlock /> component for React Email.

React Email's Code Block Component in action
React Email's Code Block Component in action

Now, we're taking it a step further by adding this functionality to Resend Broadcasts.

This feature allows you to:

  • Use your favorite dark or light theme
  • Apply syntax highlighting powered by Prism.js
  • Render code using the right programming language

The new component is powered by @react-email/code-block, which includes a series of improvements in the latest version:

  • Fixed extra margin in between each code block line
  • Fixed lines being split in a way that empty lines were ignored
  • Fixed lines being forced to wrap and sometimes collapsing on others

Most of these fixes are going to make the mobile experience even better, as the code block will now be more readable and easier to interact with.

Please let us know if you have any suggestions on how to make the editor component even better. We are always looking for ways to improve the experience.