---
title: "New Code Block Component"
slug: new-code-block-component
description: "Improve how you display code in your emails."
created_at: "2024-07-04"
updated_at: "2024-11-28"
image: https://cdn.resend.com/posts/new-code-block-component.jpg
humans: ["zeh-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](https://react.email/docs/components/code-block).

![React Email's Code Block Component in action](https://cdn.resend.com/posts/new-code-block-component-1.jpg)

Now, we're taking it a step further by adding this functionality to [Resend Broadcasts](/blog/send-marketing-emails-with-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

<video
  src="https://cdn.resend.com/posts/new-code-block-component-2.mp4"
  autoPlay
  loop
  muted
  playsInline
  onClick="this.controls = true"
  className="extraWidth"
/>

The new component is powered by [@react-email/code-block](https://www.npmjs.com/package/@react-email/code-block), which includes a series of improvements in the [latest version](https://github.com/resend/react-email/pull/1527):

* 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.