Syntax highlighting code samples in HTML emails

Many modern web apps require the end user to install some bit of code. Even small snippets of code are much easier to read and understand when they're properly syntax-highlighted. Most existing libraries for syntax highlighting are huge combinations of CSS and JavaScript and don't work at all in most mail clients. Or, the tools are manual and require copying and pasting into a web page to get highlighting. 

If your application needs dynamically generated code samples with syntax highlighting, things become more difficult. That's why we created MailBrush. MailBrush lets you add syntax highlighting to code snippets so they can be used in your email templates. And since it's a node.js package, you can automate any email workflow and reduce the manual overhead. 

Then, instead of plain snippets in your email templates that look like this:

Your snippets will now look like this:

MailBrush has syntax highlighting support for HTML, CSS and JavaScript snippets, as well as JSON, PHP, HTTP and Bash. It allows for full customization of highlighting colors and styles so you can customize your highlighting to fit with the rest of your mail templates. Once you run MailBrush on your code the resulting HTML snippet will work in all major email clients:

• Desktop
  • Apple Mail 8, 9, 10
  • Outlook 2003, 2007, 2010, 2011, 2013, 2016
  Windows 10 Mail
• Mobile
  • Gmail App (Android)
  • iPhones
  • iPads
• Web
  • AOL
  • Gmail
  • Outlook.com
  • Yahoo

Convinced? Okay, let's set up MailBrush and start generating some HTML. The first step is to install Node.js. The easiest way to get Node is to grab the installer from the Node.js site. That will work for both OS X and Windows. If you're on Linux you can also install via the Node download page, though you may be better off using your distro's package repository to install Node.

Once you've got Node installed, installing MailBrush is simple. Just open up your terminal application and enter this command:

npm install mailbrush --save

That's it, you've got MailBrush installed. Now let's run it on some code.  There's some basic Node boilerplate code we need to write to make everything work, so here's a snippet you can use to get started:

const mailbrush = require('mailbrush');

// Specify options
const options = {
  language: 'json',
  cssOptions: {
	backgroundColor: 'pink'
  }
};

// The code snippet you want to beautify
const snippet = `{
   "key": "value",
   "key2": "value 2"
}`

mailbrush.convert(snippet, options, (html) => {
  // Returns HTML with inlined CSS for email client compatibility
  console.log(html);
});

Save that snippet in a file named app.js (or whatever you'd like to call it) and then you can run it with this command:

node app.js

In this case that would output this code:

<table cellpadding="0" cellspacing="0" style="background: pink;"><tr><td style="background: pink; color: #000; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 13px; padding: 10px 15px;"><pre style="-moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; color: #000; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 13px; hyphens: none; line-height: 1.5; overflow: auto; tab-size: 2; text-align: left; white-space: pre; word-break: break-all; word-spacing: normal; word-wrap: normal;"><span style="color: #999; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 13px;">{</span>
   <span style="color: #905; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 13px;">"key"</span><span style="color: #a67f59; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 13px;">:</span> <span style="color: #690; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 13px;">"value"</span><span style="color: #999; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 13px;">,</span>
   <span style="color: #905; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 13px;">"key2"</span><span style="color: #a67f59; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 13px;">:</span> <span style="color: #690; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 13px;">"value 2"</span>
<span style="color: #999; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 13px;">}</span></pre></td></tr></table>

That's all the HTML (and inline CSS) you need to put that snippet into your mail template. This code will be highlighted and will look good in all the supported mail clients listed above. 

Now, to actually generate markup for your code you can change the script above. The options constant is where you can change colors, fonts and highlighting. See the MailBrush Github page for a full list of options. 

The other two things you'll want to change is the language variable, which can be markup, php, javascript, css, http, or bash. Finally you'll want to change the snippet constant to the actual code you want highlighted.

And that's all there is to it. Happy highlighting!