什么用途，怎么使用？

当有文本被选中的时候，右键点击，可以看到 将选中文字导出为图片 的操作，选择模板之后，会有三种可选导出类型:

  • 插入编辑器: 导出为图片之后，直接插入到编辑区域
  • 复制到粘贴板: 导出为图片之后，会被复制到粘贴板，可以一键复制到其它需要的地方
  • 导出为文件: 选择一个路径，进行保存

这个功能的价值所在？

这个功能的最大价值，就是 把一张配图“写”出来。

当我们需要在写作时候插图，并且这个图片需要被处理过时，一般的做法是使用一些制图工具 (比如 Photoshop 或者其它手机端的 App)，作为 MarkEditor 的设计者，我们希望此时可以不借助第三方的工具，不然会有两个无法回避的弊端:

  1. 打破写作本身流畅的节奏
  2. 重复的机械工作没有自动化 (大多数时候的作者完成配图时是有一个模板的)

巧用注释语法以及 Unsplash

在 MarkEditor 中，当前行以 //+空格 开始，则表示此行是注释语法，并不会成现在最终渲染后的页面。如此一来，用于 书写图片 的文本和最终的图片，就不会同时出现而产生内容上的冲突了。
 而 Unsplash 的功能，可以快速帮你找到极漂亮的、自由版权的图片。
 如下注释内容所示，最后一行插入图片之后，在选中注释区域的文字，尝试导出一张图片吧！

字体是设计的一部分

上面的示例中，如果使用 文悦古典明朝体 呈现，效果会更好。
 另外，我们也推荐在自己电脑上下载、安装 花园明朝体， 这是一个设计非常漂亮的字体。

除了方正字库之外，这些年有不少新的中文字体公司、团体出现，比如:

而且针对个人非商业使用而言，一般字体商会提供非常实惠的购买计划、或者是免费的非商业版。

如果自定义模板实现 把图片写出来，我们建议应当考虑一个恰当的字体，会让图片最终的呈现变得更加精致。

自定义模板

有文本处于选中状态，右键点击，选择 “将选中文字导出为图片 --> 打开模板目录”，即可见所有的模板文件。
 模板文件的后缀为 .html，其语法为 Jinja2，你也可以简单参考默认的 Simple.html，并不复杂。
 基本的原理是：

  1. 选中的文字经过基本的处理后，将变量传入模板
  2. 由模板渲染为 HTML 页面
  3. HTML 页面保存为图片

metadata 声明

如果选中区域的文字起始几行，也是 key: value 这种形式的 metadta 声明的话，这些声明的变量可以在自定义模板中被直接调用。
 另外，比较特殊的是 width 这个变量，如果有它存在，可以控制最终产生图片的宽，但一般，并不需要特别声明。

header 属性

<meta name="width" content="550">
<meta name="min_height" content="300">
<meta name="background" content="#fcfcfc">

在 HTML 的 header 部分，一般都建议增加如上几个对应 name 的 meta，其含义如下:

  • width: 表示图片的宽
  • min_height: 表示导出图片需要保证的最小高度
  • background: 如果图片达不到最小高度，会以这个颜色填充头尾以达到最小高度

另外，header 中支持另外一个特殊的属性，为 image_type，如果 image_type 为 png，则会影响插入编辑区域图片的类型。一般情况下不明显，不建议启用。

一些固定的变量

模板中除了可以使用 metadata 声明的变量之外，还有一些固定的变量:

  • html: 选中文本以 Markdown 语法最终解析后的 HTML 内容
  • text: 将 html 再度转为普通文本，可以去除图片等内容
  • text_lines: 一个列表，每个元素为非空的文本组成
  • simple_dict: text中每行如果是 key: value 的格式，将其转为一个字典格式的数据
  • plain_html: 将 text 再度转为 HTML
  • images: 图片的列表，每个元素都有 src 这个属性，表示图片的 URL
  • words: 选中文本的字数