GitHub + Email: How to Embed Gists in Gmail
You can now email Gists with proper formatting, indentation, and syntax highlighting
Tuesday, Jan 20th, 2015
Mixmax is a communications platform that brings professional communication & email into the 21st century.
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.
Now you can paste any Gist URL such as:
on a new line in Mixmax and hit enter.
Mixmax also supports multiple files in a Gist:
How we did it
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!