将Markdown转化为图片

时间:2022-11-20 17:31:57

在看《偷影子的人》这本书时,发现书中有很多动人的描写和深情的话语,所以想把它们用markdown做成书抄,能够通过微博分享给朋友们。但是等我摘抄完后,发现并没有办法将markdown转化为长图片分享出去,这就尴尬了。。。

网络上有很多比较好的在线的markdown编辑器,但是没有找到哪个编辑器能够将markdown直接转化为图片,而一般都支持导出为pdf或者网页的形式。不明白难道是大家都没有这样子的需求?

但是自己按捺不住自己的好奇心,决定尝试一下,希望找到一个比较简单的方法。

目前的方法如下:

  • 使用锤子便签
  • markdown -> html -> 图片
  • markdown -> pdf -> 图片

直接转化

锤子便签

锤子便签本身就是支持分享为图片的功能,后来又引入了markdown语法,这就变成了天然的直接将markdown转化为图片的工具了,而且分享的图片比较适合手机用户查看。

但是自己没用过锤子便签(我使用的是魅族便签*^_^*),而且担心手机端的锤子便签对markdown语法的支持是不是比较多。

间接转化

如果你不喜欢锤子便签导出的图片风格,那么网上有好多的在线markdown编辑器:
小书匠 || 马克飞象 || Cmd markdown || Dillinger
它们可以生成风格各异的markdown展示,在线使用比较方便,而且可以导出为pdf和html网页。

markdown -> html -> picture

以下以马克飞象为例,它默认的导出模板我比较喜欢

  1. 首先编辑好自己的markdown文件(在线编辑或者直接粘贴过去),点击右侧顶部的菜单按钮,选择导出为Html
    将Markdown转化为图片
  2. 打开生成的html文件,但是发现显示的文档会排满整个PC浏览器的界面,这肯定是不行的,因为一行有太多的字了。那么下面就是可以:
    • 选择将浏览器的窗口宽度调小(但是这个方法好像不能精确地控制窗口的宽度,但是还可以);
    • 也可以选择“审查元素”大法了,调整body标签的宽度(个人试了一下,发现宽度大概为350px-450px为宜)。
      将Markdown转化为图片
  3. 下面就可以截长图了(°o°;),哈哈,当然为了创建好看的markdown图片,不能就这样草草了事。截长图推荐一个软件nimbus(但是发现其中的“块截图”偶尔不是很好使)。
  4. 但是直接截取的图片在分布率上是跟不上的,所以,下面还要用到浏览器的放大功能。比如先将浏览器放大300%(ctrl+滚轮),再截图,这时候截的图的尺寸已经增加为原来的3倍了,所以就会便的很清晰了。
    将Markdown转化为图片

markdown -> pdf -> picture

该方法和上面的一样都是曲线救国,但是因为将pdf转化为图片的过程字体会变得模糊,而且还不能像上面那样调节分辨率,所以,重点还是推荐下面的一个网站。

对pdf文件能完成各种操作的神奇网站PDF转化器(PDFdo);

  1. 因为在线编辑器导出的pdf会分成好几页,所以最终要想生成一张长图,所以在markdown保存为pdf文件的时候就要注意了:页边距设置为0
    将Markdown转化为图片
  2. 通过上面网站的pdf页面拼接功能,将生成的多页pdf无缝拼接为一页;
  3. 然后再利用pdf转图片,将pdf转化为一个长图片(上面提到了,分辨率会受影响)。

自己实现

如果上面的操作过程都不够简单灵活的话,那只能根据自己的要求,自己敲代码实现了。或者,找到了别人更好的实现。