代碼片段生成帶高亮效果的漂亮圖片我們可以使用carbon

但是如果想製作命令行操作的動圖一般是錄屏來轉換成GIF圖，其實還有另一種方式，我們可以使用asciinema + svg-term 生成SVG圖片

示例圖片

優點

• 操作過程簡單
• 更小的文件體積
• 矢量
• 可以手動修改速度和文案
• 文字可以複製
• 跨平台

首先需要安裝asciinema和svg-term

安裝asciinema

svg-term安裝比較簡單

npm install -g svg-term-cli

第二步：安裝完成後，先使用asciinema開始記錄

# 默認會使用/bin/bash作為shell
asciinema rec

我運行了下面兩行代碼

# fuc是file-uploader-cli的簡寫
fuc -t github -c github.json
fuc test.svg

file-uploader-cli是一個命令行文件上傳工具，可以通過命令行上傳文件到github，阿里雲對象存儲，七牛雲對象存儲等。可以方便的用做圖牀上傳工具，也可以在Typora中使用：當插入圖片時會自動上傳並替換為網絡圖片地址。

退出asciinema記錄可以使用Ctrl + D,也可以直接鍵入exit。退出時我們選擇鍵入ctrl+c來保存記錄到本地。

asciinema生成的記錄大概是這樣

{"version": 2, "width": 101, "height": 24, "timestamp": 1614856599, "env": {"SHELL": "/bin/bash", "TERM": "xterm-256color"}}
[0.016438, "o", "\u001b[?1034hbash-3.2$ "]
[0.664553, "o", "fu"]
[0.664684, "o", "c -t github -c "]
[0.664785, "o", "github.json"]
[1.189336, "o", "\r\n"]
[1.272668, "o", "bash-3.2$ "]
[2.81004, "o", "fu"]
[2.810274, "o", "c test.svg"]
[3.2536, "o", "\r\n"]
[3.972172, "o", "https://cdn.jsdelivr.net/gh/Iamxiaozhu/file-uploader-cli/test.svg\r\n"]
[4.982049, "o", "bash-3.2$ "]
[7.350391, "o", "exit\r\n"]

可以直接修改時間參數來調整速度,

第三步：根據第二步生成的本地記錄生成svg

svg-term --in /var/folders/0k/25hwq5v57j5dfg7xk9966k4c0000gp/T/tmpyckli_c2-ascii.cast 
    --out ./test.svg --height 9 --width 60 --window

--in 指定配置所在地址

--height 生成SVG圖片高度

--width 生成SVG圖片寬度

--out 輸出svg圖片

--out SVG圖片是否帶邊框