GitHub + Email: How to Embed Gists in Gmail

GitHub + Email: How to Embed Gists in Gmail | Mixmax

Ever tried pasting code into an email? It’s barely recognizable as code. At Mixmax, we’re bringing the power of the web to email and just integrated with Github Gists so you can share code over email seamlessly. Gone are the days of pasting code into email without formatting, indentation or syntax highlighting.

Unformatted code in email body

Now you can paste any Gist URL such as:

https://gist.github.com/jennz0r/37033560576549062570

on a new line in Mixmax and hit enter.

Gist formatting inside email body

Mixmax also supports multiple files in a Gist:

https://gist.github.com/jennz0r/f6bb880c8a092e3b38b1

Multiple files in a Gist in email body

How we did it

Originally, we figured we’d imitate Gist’s formatting manually. Since email clients don’t support JavaScript, we thought we’d recreate the indentation and syntax highlighting by using the Gist HTML and CSS. Then Jeff, a software engineer here at Mixmax, noticed that we could take advantage of the Embed URL script provided by GitHub on each Gist.

Github Gist embed script

To style the Gist faithfully in email, we grab the HTML and CSS directly from that script.

Since we ensure that emails sent with Mixmax look great whichever client they’re viewed on, we need to massage the underlying markup to make sure the Gist renders beautifully. Because many email clients require inline CSS, we parse the scrubbed stylesheet and inject the styles inline. The biggest CSS challenge was to format the Gist correctly to render properly in email clients across desktop and mobile. This means making Gists white-space sensitive to preserve formatting, and enabling horizontal scrolling on mobile devices. We did this using a combination of the <pre> tag and the overflow-x: scroll; property.

And voilà, that’s how we preserve the formatting, indentation, and syntax highlighting of the Gists you paste in Mixmax. Try it yourself by adding our extension to Gmail and sending us your favorite Gists!

This is just one of many in-email apps you can create on the Mixmax platform to make email more effective. Ping us on Twitter @Mixmax if you want 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