As many of you know, I’ve recently launched a new weekly newsletter called Web Tools Weekly. In addition to providing a weekly, categorized list of tools for front-end developers, most issues begin with a brief tip or tutorial that usually includes code examples that have syntax highlighting.
The method I use is based on a suggestion given to me by Joshua Clanton, who writes the very cool A Drip of JavaScript newsletter. When I asked him how he embeds code in his, he directed me to this page on MailChimp’s blog along with this GitHub repo.
The screenshot below shows an example of embedded highlighted code, from Issue #6 of my newsletter:
Unfortunately, the MailChimp post Joshua referenced seems to be out of date and the video it claims to embed isn’t showing up. So I came up with a simple way to do this on my own, based on Joshua’s suggestion of Pygments themes. Here’s a quick step-by-step showing how I do this.
Visit Pygments.org in Chrome or Safari
I use Google Chrome (more on this in a moment) to visit Pygments.org (a site that lets you add syntax-highlighted code to pretty much anything). I paste the code I want highlighted in the textarea field at the bottom of the page.
After I paste the code into the field, I type a name for the code example (the name doesn’t matter, so I usually just put something random), and select the code language from the drop-down list. This option lists 291 programming languages, so I think it’s safe to say you shouldn’t have a problem highlighting any type of code.
Entering my name is optional. Once I’ve done that, I click the “Highlight!” button and I see the following:
Notice two things: First, I have the option to choose the theme for the highlighting. For JavaScript, I always use Monokai, which everyone seems to love. For HTML snippets, I find Monokai is too colorful, so I choose the theme called “Native”, which is simpler, but has a similar enough look to Monokai.
Note that Pygments allows you to actually save your syntax highlighted code snippet. You don’t have to do this in this case. This mediary page is simply used for the copy and paste done in the next step, so I don’t actually click the “save” option that you see in the last screenshot.
Copy and Paste Directly from Pygments
Once I’ve got the code highlighted, to get the code into the MailChimp editor, I just copy it right on the page. This is where Chrome and Safari come in handy.
Apparently, Chrome and Safari are the only browsers that will copy the contents of a web page in rich text format. I’m not sure if Firefox, IE or Opera used to do this or not, but I think the way Chrome and Safari do this is the right way so I hope they don’t change that. I’ve tested this on both Mac and Windows, with the same results.
Once the rich-text-formatted code is on the clipboard, I simply paste it directly into the MailChimp email editor:
Notice, however, that the rich-text paste doesn’t include the background color.
Use “Source” Mode in MailChimp Editor
To fix the fact that the background color doesn’t show up, I simply view the email I’m editing in the MailChimp editor in “source” mode. This is done by hitting the “Source” option:
Then I can see all the wonderfully-ugly HTML and CSS that builds the email newsletter. I find the section that has the syntax-highlighted code, and I change the background-color property on the “pre” element from transparent to #272727:
The preview pane on the left will display immediately what the syntax-highlighted code will look like:
And that’s basically it. I should point out that because the padding on the syntax highlighted code shows up differently on different email clients, I’ve had to add some extra HTML table code to get a fairly cross-client look in recent issues. For example Outlook on Windows strips out the padding on the <pre> element. Using padding on a parent <table> element instead seems to work universally. (I use a text expander on my Windows machine to auto-generate that extra code for each highlighted section of code, so I don’t have to type it each time.)
In Summary
There are probably other ways to do this. For me, this is a simple method that works well with MailChimp. If you’re creating custom HTML emails outside of MailChimp’s editor, you can probably do this using their CSS Inliner or a similar tool.
If anyone has another suggestion for embedding code with custom syntax highlighting in HTML email, let me know!
Thank you, Louis.
Brilliant, just what I was looking for :)