在写文章的时候,插入一些命令行代码。而命令的执行返回结果很难表现。如果用动画的方式,那么也不错的。使用termtosvg工具,它能够将命令行会话保存为SVG动画。

安装

$ brew install termtosvg

安装后,就可以直接输入termtosvg录制终端命令了,输入exit或者Ctrl+D退出录制。会自动生成一个svg格式的动画文件。将该动画文件上传到你的图床,然后直接使用图片的标签引用就可以了。

![Example](./docs/examples/awesome_window_frame.svg)

样例:

但是如果直接录制,效果可能不太好。有时候可能输错命令,有时候节奏有些缓慢,造成很不好的体验。如同影片有剪辑一样,我们也需要对“影片”进行编辑。但是scv动画比较难处理,我们需要换一种方式处理。

termtosvg可以把cast格式的终端录制文件转换成svg格式的动画:

$ termtosvg render recording.cast animation.svg

并且termtosvg也支持录制cast(asciicast v2)类型的终端记录文件。

$ termtosvg record recording.cast

猜测termtosvg内部的实现也是先录制成cast格式的临时文件,然后再转换成svg动画文件的。

而cast文件内容是下面这种格式的纯文本文件,理论上就可以直接通过任何文件编辑器进行编辑。

{"version": 2, "width": 136, "height": 26}
[1.727814, "o", "l"]
[1.870424, "o", "\bls"]
[2.197056, "o", "\u001b[?1l\u001b>"]
[2.197273, "o", "\u001b[?2004l\r\r\n"]
[2.200966, "o", "\u001b]2;ls -G\u0007\u001b]1;ls\u0007"]
[2.205864, "o", "rec.cast       recording.cast\r\n"]

当然我们不会手工去编辑,我们还需要使用两个工具。asciinemaasciinema-edit,asciinema可以录制终端,asciinema-edit可以对终端命令进行编辑。具体使用方法可以翻阅官方文档。

总结一下整个过程:

  1. asciinema录制cast记录
  2. asciinema-edit编辑cast
  3. termtosvg render生成svg动画
  4. 上传到图床
  5. markdown文件引用