VHS
通过编写代码来创建终端 GIF,用于集成测试和演示您的命令行工具。
上面的示例是使用 VHS 生成的(查看源代码)。
教程
首先,安装 VHS并创建一个新的 .tape
文件。
vhs new demo.tape
使用您喜欢的 $EDITOR
打开 .tape
文件。
vim demo.tape
Tape 文件由一系列命令组成。这些命令是指示 VHS 在其虚拟终端上执行的操作。有关所有可用命令的列表,请参阅命令参考。
# 我们应该在哪里保存 GIF?
Output demo.gif
# 设置一个 1200x600 的终端,字体大小为 46px。
Set FontSize 46
Set Width 1200
Set Height 600
# 在终端中输入命令。
Type "echo 'Welcome to VHS!'"
# 暂停以增加戏剧效果...
Sleep 500ms
# 按回车键运行命令。
Enter
# 欣赏输出结果片刻。
Sleep 5s
完成后,保存文件并将其输入到 VHS 中。
vhs demo.tape
大功告成!您应该在目录中看到一个名为 demo.gif
(或您在 Output
中指定的其他名称)的新文件。
更多示例请参见 examples/
目录。
安装
使用包管理器:
# macOS 或 Linux
brew install vhs
# Arch Linux
pacman -S vhs
# Nix
nix-env -iA nixpkgs.vhs
# Windows 使用 scoop
scoop install vhs
或者,使用 Docker 直接运行 VHS,包含所有依赖:
docker run --rm -v $PWD:/vhs ghcr.io/charmbracelet/vhs <cassette>.tape
或者,下载它:
或者,只需使用 go
安装:
go install github.com/charmbracelet/vhs@latest
Windows、Debian、Ubuntu、Fedora、RHEL、Void 安装说明
- Debian / Ubuntu
# Debian/Ubuntu
sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://repo.charm.sh/apt/gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/charm.gpg
echo "deb [signed-by=/etc/apt/keyrings/charm.gpg] https://repo.charm.sh/apt/ * *" | sudo tee /etc/apt/sources.list.d/charm.list
# 从 https://github.com/tsl0922/ttyd/releases 安装 ttyd
sudo apt update && sudo apt install vhs ffmpeg
- Fedora / RHEL
echo '[charm]
name=Charm
baseurl=https://repo.charm.sh/yum/
enabled=1
gpgcheck=1
gpgkey=https://repo.charm.sh/yum/gpg.key' | sudo tee /etc/yum.repos.d/charm.repo
# 从 https://github.com/tsl0922/ttyd/releases 安装 ttyd
sudo yum install vhs ffmpeg
- Void
sudo xbps-install vhs
- Windows
winget install charmbracelet.vhs
# 或使用 scoop
scoop install vhs
录制 Tape
VHS 能够从您的终端操作生成 tape 文件!
要录制到 tape 文件,运行:
vhs record > cassette.tape
执行您想要的任何操作,然后 exit
终端会话以停止录制。您可能需要手动编辑生成的 .tape
文件以添加设置或修改操作。然后,您可以生成 GIF:
vhs cassette.tape
发布 Tape
VHS 允许您将 GIF 发布到我们的服务器,以便轻松与朋友和同事分享。指定要分享的文件,然后使用 publish
子命令将其托管在 vhs.charm.sh
上。输出将为您提供通过浏览器、HTML 和 Markdown 分享 GIF 的链接。
vhs publish demo.gif
VHS 服务器
VHS 内置了一个 SSH 服务器!当您自行托管 VHS 时,可以像本地安装一样访问它。VHS 将可以访问主机上的命令和应用程序,因此您无需在自己的机器上安装它们。
要启动服务器,运行:
vhs serve
配置选项
VHS_PORT
:监听的端口(1976
)VHS_HOST
:监听的主机(localhost
)VHS_GID
:运行服务器的组 ID(当前用户的 GID)VHS_UID
:运行服务器的用户 ID(当前用户的 UID)VHS_KEY_PATH
:使用的 SSH 密钥路径(.ssh/vhs_ed25519
)VHS_AUTHORIZED_KEYS_PATH
:授权密钥文件的路径(空,公开可访问)
然后,只需通过 ssh
从其他机器访问 VHS:
ssh vhs.example.com < demo.tape > demo.gif
VHS 命令参考
[!注意] 您可以在命令行中使用
vhs manual
查看所有 VHS 文档。 VHS 命令主要有以下几种基本类型:
Output <路径>
:指定文件输出Require <程序>
:指定录像文件所需的程序Set <设置> 值
:设置录制参数Type "<字符>"
:模拟输入Left
Right
Up
Down
:方向键Backspace
Enter
Tab
Space
:特殊键Ctrl[+Alt][+Shift]+<字符>
:按下控制键+其他键和/或修饰键Sleep <时间>
:等待指定时间Hide
:在输出中隐藏命令Show
:停止在输出中隐藏命令Screenshot
:对当前帧截图Copy/Paste
:从剪贴板复制和粘贴文本Source
:从另一个录像文件中导入命令Env <键> 值
:设置环境变量
Output
Output
命令允许你指定渲染的位置和文件格式。你可以在一个录像文件中指定多个输出,它们会被渲染到相应的位置。
Output out.gif
Output out.mp4
Output out.webm
Output frames/ # 一个包含 PNG 序列帧的目录
Require
Require
命令允许你为录像文件指定依赖项。如果 $PATH
中缺少所需程序,这些命令有助于尽早发现错误,确保 VHS 执行不会出现意外问题。
Require 命令必须定义在录像文件的顶部,位于任何非设置或非输出命令之前。
# 一个要求 gum 和 glow 在 $PATH 中的录像文件
Require gum
Require glow
Settings
Set
命令允许你更改终端的全局设置,如字体设置、窗口尺寸和 GIF 输出位置。
设置必须在录像文件的顶部进行。除 TypingSpeed
外,任何在非设置或非输出命令之后应用的设置都将被忽略。
设置 Shell
使用 Set Shell <shell>
命令设置 shell
Set Shell fish
设置字体大小
使用 Set FontSize <数字>
命令设置字体大小
Set FontSize 10
Set FontSize 20
Set FontSize 40
设置字体族
使用 Set FontFamily "<字体>"
命令设置字体族
Set FontFamily "Monoflow"
设置宽度
使用 Set Width
命令设置终端的宽度
Set Width 300
设置高度
使用 Set Height
命令设置终端的高度
Set Height 1000
设置字间距
使用 Set LetterSpacing
命令设置字符间的间距(字距)
Set LetterSpacing 20
设置行高
使用 Set LineHeight
命令设置行间距。
Set LineHeight 1.8
设置打字速度
Set TypingSpeed 500ms # 500毫秒
Set TypingSpeed 1s # 1秒
设置每次按键的秒数。例如,打字速度为 0.1
会导致每个字符之间有 0.1秒
(100毫秒
)的延迟。
这个设置也可以通过 @<时间>
语法在每个命令中被覆盖。
Set TypingSpeed 0.1
Type "每个字符延迟100毫秒"
Type@500ms "每个字符延迟500毫秒"
设置主题
使用 Set Theme
命令设置终端的主题。主题值应该是一个包含16种基本颜色以及前景色和背景色的JSON字符串。
Set Theme { "name": "Whimsy", "black": "#535178", "red": "#ef6487", "green": "#5eca89", "yellow": "#fdd877", "blue": "#65aef7", "magenta": "#aa7ff0", "cyan": "#43c1be", "white": "#ffffff", "brightBlack": "#535178", "brightRed": "#ef6487", "brightGreen": "#5eca89", "brightYellow": "#fdd877", "brightBlue": "#65aef7", "brightMagenta": "#aa7ff0", "brightCyan": "#43c1be", "brightWhite": "#ffffff", "background": "#29283b", "foreground": "#b3b0d6", "selection": "#3d3c58", "cursor": "#b3b0d6" }
你也可以通过名称设置主题:
Set Theme "Catppuccin Frappe"
运行 vhs themes
或查看 THEMES.md 以获取完整列表。
设置内边距
使用 Set Padding
命令设置终端框架的内边距(以像素为单位)。
Set Padding 0
设置外边距
使用 Set Margin
命令设置视频的外边距(以像素为单位)。
Set Margin 60
Set MarginFill "#6B50FF"
设置窗口栏
使用 Set WindowBar
命令在终端窗口上设置窗口栏的类型(Colorful、ColorfulRight、Rings、RingsRight)。
Set WindowBar Colorful
设置边框圆角
使用 Set BorderRadius
命令设置终端窗口的边框圆角(以像素为单位)。
# 如果使用BorderRadius,你可能还想添加Margin和MarginFill。
Set Margin 20
Set MarginFill "#674EFF"
Set BorderRadius 10
设置帧率
使用Set Framerate
命令设置VHS捕获帧的速率。
Set Framerate 60
设置播放速度
设置最终渲染的播放速度。
Set PlaybackSpeed 0.5 # 使输出速度减慢2倍
Set PlaybackSpeed 1.0 # 保持输出正常速度(默认)
Set PlaybackSpeed 2.0 # 使输出速度加快2倍
设置循环偏移
设置GIF循环应该开始的偏移量。这允许你使GIF的第一帧(通常用于预览)更有趣。
Set LoopOffset 5 # 从第5帧开始GIF
Set LoopOffset 50% # 从中间开始GIF
设置光标闪烁
设置光标是否应该闪烁。默认启用。
Set CursorBlink false
输入
使用Type
来模拟按键操作。也就是说,你可以使用Type
来编写在终端中输入的脚本。Type对于输入命令和与终端中的提示和TUI交互都很方便。该命令接受一个字符串参数作为要输入的字符。
你可以用Set TypingSpeed
设置标准输入速度,并在某些地方用@time
参数覆盖它。
# 输入某些内容
Type "随便你想输入什么"
# 非常慢地输入某些内容!
Type@500ms "慢点,伙计。"
用反引号转义单引号和双引号。
Type `VAR="已转义"`
按键
按键命令可以选择性地带有@time
和重复count
,用于每隔<time>
间隔重复按键。
Key[@<time>] [count]
退格键
使用Backspace
命令按退格键。
Backspace 18
Ctrl键
你可以使用Ctrl
命令访问控制修饰键并发送控制序列。
Ctrl+R
回车键
使用Enter
命令按回车键。
Enter 2
方向键
使用Up
、Down
、Left
、Right
命令按任意方向键。
Up 2
Down 2
Left
Right
Left
Right
Type "B"
Type "A"
Tab键
使用Tab
命令输入制表符。
Tab@500ms 2
空格
使用Space
命令按下空格键。
Space 10
上一页/下一页
使用PageUp
或PageDown
命令按下上一页/下一页键。
PageUp 3
PageDown 5
睡眠
Sleep
命令允许你在不与终端交互的情况下继续捕获帧。当你需要等待某些内容完成时,这很有用,比如在录制中包含旋转器或加载状态。该命令接受以秒为单位的数字参数。
Sleep 0.5 # 500毫秒
Sleep 2 # 2秒
Sleep 100ms # 100毫秒
Sleep 1s # 1秒
隐藏
Hide
命令指示VHS停止捕获帧。它用于暂停录制以执行隐藏命令。
Hide
这个命令对于执行录制GIF所需的任何设置和清理操作很有帮助,例如构建最新版本的二进制文件,并在演示录制完成后删除该二进制文件。
Output example.gif
# 设置
Hide
Type "go build -o example . && clear"
Enter
Show
# 录制中...
Type 'Running ./example'
...
Enter
# 清理
Hide
Type 'rm example'
显示
Show
命令指示VHS再次开始捕获帧。在Hide
命令之后使用它来恢复输出的帧录制。
Hide
Type "你看不到这个正在被输入。"
Show
Type "你会看到这个正在被输入。"
截图
Screenshot
命令捕获当前帧(png格式)。
# 在任何时候...
Screenshot examples/screenshot.png
复制/粘贴
Copy
和Paste
命令用于从剪贴板复制和粘贴字符串。
Copy "https://github.com/charmbracelet"
Type "open "
Sleep 500ms
Paste
环境变量
Env
命令通过键值对设置环境变量。
Env HELLO "WORLD"
Type "echo $HELLO"
Enter
Sleep 1s
源文件
source
命令允许你执行来自另一个磁带文件的命令。
Source config.tape
持续集成
你可以将VHS连接到你的CI管道,使用官方的VHS GitHub Action来保持你的GIF最新:
VHS还可以用于集成测试。使用.txt
或.ascii
输出生成黄金文件。将这些文件存储在git仓库中,以确保磁带文件的多次运行之间没有差异。
Output golden.ascii
语法高亮
对于支持使用tree-sitter进行语法高亮的编辑器,有一个适用于.tape
文件的tree-sitter语法:
它在Neovim、Emacs等编辑器中效果很好!
反馈
我们很乐意听到你对这个项目的想法。随时给我们留言!
许可证
Charm的一部分。
Charm热爱开源 • Charm loves open source