GitHub + Email: How to Embed Gists in Gmail

January 21, 2015

Written byJennifer Wong

GitHub + Email: How to Embed Gists in Gmail

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:

on a new line in Mixmax and hit enter.

Gist formatting inside email body

Mixmax also supports multiple files in a Gist:

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!

Get Mixmax