New Code Block Component
Improve how you display code in your emails.
Zeh FernandesWhen 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.
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.