GitHub + Email: How to Embed Gists in Gmail

You can now email Gists with proper formatting, indentation, and syntax highlighting

Mixmax is a communications platform that brings email into the 21st century. We believe everything you do today on the web should be possible in any email.

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.

Ugly code in email

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 with one file

Mixmax also supports multiple files in a Gist:

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

Gist with multiple files

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.

Gist embed

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 @MixmaxHQ if you want to make one of your own!