Write perfect, readable code in Gmail

How to Write and Send Code Block in Gmail | Mixmax

Today we’re happy to announce that you can write perfect, readable code directly in email.

Writing code in email is terrible. It’s nearly impossible to indent correctly and syntax highlighting is non-existent. We’re here to help!

We at Mixmax first solved this pain point by announcing our integration with GitHub Gists, enabling users to add beautiful Gists directly in their email.

Users loved the feature, but it required a 3rd party service to send code through email. To solve this, we used the Mixmax SDK to build an app that lets you painlessly write code snippets with perfect formatting directly in your emails.

To create a code snippet, head to the App menu in Mixmax, and select Code Snippet:

Code snippet in App menu

In the pop-up, add an optional title and choose the language of your code, then paste or type code into the text box and choose your favorite theme. Click Insert Code Snippet at the bottom to put code right in your email.

Insert code snippet into email

And that’s it. Your code appears with all its original formatting, indentation, and syntax highlighting according to the language and theme you chose:

Code snippet with syntax highlighting

Our code snippets work in all email clients including Outlook. And for night owls, we even have dark background themes:

Code snippet with dark mode

Another code snippet with dark mode

As a bonus — the code creator is extra powerful when used with templates. If you have a bunch of code snippets that you send frequently, save them by selecting the templates menu and Save this message as a template. They’re super helpful for evangelism, customer support, or sales with engineers and developers.

Code snippet as a template in email

We rely on Ace Editor for syntax highlighting and the themes we provide. We simply walk the DOM provided by Ace and scrape the CSS styles.

Again, because many email clients require inline CSS, we inject those styles inline. We grab any dark background-color styles from Ace and apply them client-side so those themes will look great in any inbox. We also use the same overflow-x: scroll property from our Gists to enable scrolling for longer lines of code on mobile and desktop.

The most complicated part of implementation was debugging a display issue on any Apple devices — our code snippets were appearing completely blank. Turns out, the solution was some quick editing in our HTML by making sure our <pre> were contained within <table> instead of <div>.

Try it out by adding our extension to Gmail and sending your best code snippets over — we’d love to hear from you. And stay tuned. In a later post, we’ll show you how we built this app with the Mixmax SDK.

This is yet another of the many in-email apps you can create on the Mixmax sales engagement platform to power up your email. Email us careers@mixmax.com or tweet us @Mixmax if you’d like to make one of your own!

Ready to transform your revenue team?

Request a demo

Recent Posts

true

You've probably heard the old age phrase, "Don't judge a book by its cover." The same goes for leads—even if the "cover" in question is on a computer screen.

Sure, most account executives can't tell at first glance whether a lead will be a good fit for their business (or even care about what they have to offer). But that doesn't mean you have to fumble around blindly, shooting emails at every poor prospect you come across.

In fact, there's a way to ensure you target the right people at the right time, every time. And we're going to show you how.

Lead engagement strategy mixmax
5 Expert Tips for Crafting a Lead Engagement Strategy You've probably heard the old age phrase, "Don't judge a book by its cover." The same goes for leads—even if the "cover" in question is on a computer …
Read more

Sophia Institute case study
Sophia Institute Cuts Costs With Mixmax’s Sales Engagement Solution “Mixmax has helped us do the work of many more people without the cost of many more people.” –Rob Kenney, VP of Sales at Sophia Institute
Read more