HTML 电子邮件中的语法高亮代码示例

许多现代网络应用程序需要最终用户安装一些代码。当正确地突出显示语法时，即使是很小的代码片段也更容易阅读和理解。大多数现有的语法高亮库都是 CSS 和 JavaScript 的巨大组合，在大多数邮件客户端中根本不起作用。或者，这些工具是手动的，需要复制并粘贴到网页中才能突出显示。 

 

如果您的应用程序需要动态生成的带有语法高亮显示的代码示例，事情就会变得更加困难。这就是我们创建MailBrush的原因。MailBrush 允许您向代码片段添加语法突出显示，以便它们可以在您的电子邮件模板中使用。由于它是一个 node.js 包，您可以自动化任何电子邮件工作流程并减少手动开销。 

 

然后，而不是像这样的电子邮件模板中的普通片段：

 

未突出显示语法的 JSON 代码示例的屏幕截图。

为了获得最大的兼容性，电子邮件中的大多数代码示例看起来非常简单，并且不包含语法突出显示。

您的代码段现在将如下所示：

 

带有语法高亮显示的 JSON 代码示例的屏幕截图。

使用 MailBrush，可以轻松生成带有语法高亮显示的代码片段。

MailBrush 具有对 HTML、CSS 和 JavaScript 片段以及 JSON、PHP、HTTP 和 Bash 的语法高亮支持。它允许完全自定义突出显示颜色和样式，因此您可以自定义突出显示以适应其余邮件模板。在您的代码上运行 MailBrush 后，生成的 HTML 片段将适用于所有主要电子邮件客户端：

 

桌面

苹果邮件 8、9、10

展望 2003、2007、2010、2011、2013、2016

Windows 10 邮件

移动的

Gmail 应用程序 (Android)

iPhone

iPad

网络

美国在线

Gmail

展望网

雅虎

信服？好的，让我们设置 MailBrush 并开始生成一些 HTML。第一步是安装 Node.js。获取 Node 的最简单方法是  从 Node.js 站点获取安装程序。这将适用于 OS X 和 Windows。如果您使用的是 Linux，您也可以通过 Node 下载页面进行安装，不过您最好使用发行版的软件包存储库来安装 Node。

 

一旦安装了 Node，安装 MailBrush 就很简单了。只需打开您的终端应用程序并输入以下命令：

 

npm install mailbrush --save

就是这样，您已经安装了 MailBrush。现在让我们在一些代码上运行它。我们需要编写一些基本的 Node 样板代码才能使一切正常工作，因此您可以使用以下代码片段开始：

 

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);

});

将该代码段保存在名为 app.js（或任何您想命名的文件）的文件中，然后您可以使用以下命令运行它：

 

node app.js

在这种情况下，将输出此代码：

 

<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>

这就是将该片段放入邮件模板所需的所有 HTML（和内联 CSS）。此代码将突出显示，并且在上面列出的所有受支持的邮件客户端中看起来都不错。