diff options
Diffstat (limited to 'postmarkapp/mailbrush.txt')
| -rw-r--r-- | postmarkapp/mailbrush.txt | 80 |
1 files changed, 80 insertions, 0 deletions
diff --git a/postmarkapp/mailbrush.txt b/postmarkapp/mailbrush.txt new file mode 100644 index 0000000..0e1c558 --- /dev/null +++ b/postmarkapp/mailbrush.txt @@ -0,0 +1,80 @@ +Many apps these days require installing 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. + +That's why we created MailBrush. MailBrush lets you add syntax highlighting to code snippets so they can be used in your email templates. + +Instead of plain snippets in your email templates that look like this: + +{ + "key": "value", + "key2": "value 2" +} + +Your snippets will now look like this: + +tk Image here + +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](https://nodejs.org/en/download/) 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: + +lxf@maya:~$ node app.js +<table cellpadding="0" cellspacing="0" style="background: white;"><tr><td style="background: white; 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` section is where you can change colors, fonts and highlighting. See the [MailBrush Github page](https://github.com/wildbit/mailbrush) 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` section to the actual code you want highlighted. + +And that's all there is to it. Happy highlighting! + |