之前我在 这篇文章 中看到了聪明工作课的大纲图片，样式比较美观，我就想能不能拆出 MarkEditor 中 Text to Image 这项功能，制作一个通用的工具，让更多的人都能通过这个工具轻松做出同样板式甚至更加美观的图片，而不需要麻烦设计师多次进行修改。
于是，我做了 Text2Image 这款 macOS 上的小工具，它能够为你将 Markdown 语法文本自动进行图文排版，生成样式美观的图片。
用 Markdown 语法对文字进行排版
就如同 Markdown 语法需要通过 CSS 进行样式渲染，Text2Image 需要对应的模板才能对文字进行渲染，完成指定样式的图文排版。
Text2Image 的模板语法采用的是 Jinja2，软件的排版引擎还会对 Markdown 语法解析后的结果再做分解，比如，即使你将下图中文本与插图语法进行上下次序的调整，也不会影响我们最后得到的结果。
Text2Image 中的模版
由少数派的聪明工作课受到启发
在少数派的 《告别低效，人人必备的聪明工作法》 课程介绍里，页尾的课程大纲图文排版令人印象深刻，这也启发了我去开发 Text2Image 这款工具，并实现了大纲图片的图文排版样式。
你可以在 Text2Image 中找到名为「SSPAI Chapter」的模版并应用它，之后在软件的输入框中填写必要的文字信息，即可生成下图样式的图片。
在 Text2Image 中，模板就是一个 HTML 文件，我们还可以在 HTML 的 header 部分调整生成器的界面，界面参数中的 Title、Signature 等元素也都可以通过输入 HTML 代码进行定制。有了这套模版，之后如果有文字改动或者需要复用这套样式的情况，就不用麻烦设计师重新出图了。
需要注意的是，当你用 Text2Image 将自己的设计写成固定模板的时候，也需要考虑书写体验、效率、设计效果等多方面因素的融合。比如「SSPAI Chapter」这个模板为了配合最终图片的排版，在对书写体验基本没影响的前提下，巧妙地在二级标题 (H2) 内增加了 B 的 HTML 标记，来实现最终图片修饰性的排版。
制作逼真的手写体
在 《决定「下一步行动」，真正让待办清单为你所用》 这篇文章里有几张非常逼真的手写体插图，让这篇文章几乎成为有史以来最「跑偏」的评论聚集地，读者几乎都在问: 这个配图是怎么做到的？
我也将其做成了一个模板，你可以在 Text2Image 中找到名为「CN Handwrite」的模版并使用它。
这里分享一个小的技巧，就是巧用 Markdown 中 pre 的语法，这样可以保证空格的效果。这套模板用的是纯 CSS 规则生成，包括纸张的网格以及图片背景中的噪点效果，后者是通过 NoisePNG 直接生成作为复合背景实现的。
由于苹果自己的 Webkit (可以简单理解为 Safari) 并不支持 filter: blur(0.35px) 这种小于 1 像素的模糊效果，而恰恰是这种微小而又不会产生实质上模糊的效果会让最终生成的图片更逼真一些。这让我灵感一现，采用了一种可以被前端工程师「挂城墙」的做法来模拟手写劲道产生的细微压痕：将 HTML 内的 DOM 元素视为类似图层的逻辑，复制、叠加一个，然后再进行 (高斯) 模糊，类似传统意义上 Photoshop 最简单的「磨皮」手法。
方便的导出功能
用 Text2Image 导出图片也很方便，软件支持三种形式的导出：
- 另存为图片文件
- 复制图片到粘贴板中
- 直接发送到微信中
如果你需要使用发送到微信的功能，你需要先在 macOS 系统系统偏好设置的扩展设置内启用微信的共享菜单选项。
最后
Text2Image 是从 MarkEditor for Mac 中独立出来的免费 App，在 MarkEditor 中这一功能叫做 Text to Image，是 Pro 版本中的一个小功能。当然，从书写体验和文本管理的角度来说，MarkEditor 内的 Text to Image 功能体验会好不少。
除了 Text2Image，我还做了 Markdow 转脑图工具 MarkRemap、支持图床的图片素材管理工具 ImageBox 等小工具，它们都是从 MarkEditor for Mac 中拆分出来的免费工具，你可以在 YiGe.app 下载它们。
最后，感谢带给我灵感的少数派设计师嘉君。
编注：MarkEditor for Mac 2.0 也已上架少数派正版软件商城，除了本文提到的 Text2Image、ImageBox 等功能，MarkEditor 还支持一键同步文章至博客、少数派等平台，并拥有微信公众号样式排版、幻灯片演示以及 MarkEditor 云服务等更多高级功能。
如果你感兴趣，可以阅读由 sainho 写作的《MarkEditor 2.0：让文字变成你想要的样子》一文，了解更多有关 MarkEditor 的功能和用法，或者在少数派正版软件商城直接 购买 MarkEditor。
