尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
用 VHS 录制 Glow 终端 Markdown 阅读器演示:Tape 脚本从入门到进阶实战
开发工具【免费下载链接】vhsYour CLI home video recorder 项目地址https://gitcode.com/gh_mirrors/vh/vhs点击查看免费下载本篇文章以开源仓库中的 examples/glow/README.md 为骨架完整拆解用 VHSWrite terminal GIFs as code为 Charm 出品的终端 Markdown 渲染器 Glow 录制演示 GIF 的两种典型方案Glow Simple 与 Glow Full。读完你将掌握 Tape 脚本的完整语法Output、Set、Type、Sleep、Hide/Show、方向键与组合键理解逐字符输入速度time语法、隐藏命令等进阶录制技巧并能直接复用仓库内现成的 .tape 文件跑出自己的演示录像。为什么用 VHS 录制 Glow场景与价值Glow 是一个在终端中渲染 Markdown 的命令行工具常用于阅读.md文档、笔记与待办清单。它的交互界面包含目录导航、全文搜索/前缀、编辑模式e/m/a、滚动浏览与分页器等多个状态是一个典型的 TUI 演示对象——光靠静态截图很难讲清楚它的交互节奏。VHS 恰好提供了以代码写终端录像的能力把每一次按键、每一段等待、每一个命令都声明式地写进.tape文件再用虚拟终端底层依赖ttyd回放并用ffmpeg逐帧编码为 GIF/MP4/WebM 或纯文本 ASCII。仓库的 examples/glow 目录就是这一场景的官方样板既有两套完整 Tape 脚本也有对应的 GIF 与 ASCII 渲染产物以及一组供 Glow 渲染的样例 Markdown 文件。examples/glow/ ├── README.md # 本文依据的示例说明文档 ├── glow-simple.tape # 极简演示脚本README 内嵌同款 ├── glow.tape # 完整进阶演示脚本README 内嵌同款 ├── glow-edit.tape # 编辑模式专项演示脚本 ├── glow-simple.gif / vhs-glow.gif / glow-edit.gif ├── glow-simple.ascii / glow.ascii ├── NiHao.md / CarrotCake.md / StewedPeaches.md ├── notes/ (Currywurst.md / Kasewurst.md / Spatzle.md / Weibwurst.md) └── to-do/ (Okonomiyaki.md / Takoyaki.md)运行前准备安装 VHS 与依赖录制 Glow 演示前机器上必须满足VHS 本体见 README.md 的安装章节macOS/Linux 可用brew install vhsArch 用pacman -S vhsNix 用nix-env -iA nixpkgs.vhsWindows 可用scoop install vhs或winget install charmbracelet.vhs也可以直接用 Docker依赖内置docker run --rm -v $PWD:/vhs ghcr.io/charmbracelet/vhs cassette.tape。运行时依赖VHS 要求ttyd与ffmpeg已安装并在PATH中README 中的 NOTE 明确说明。Glow 本体目标程序需能被虚拟终端调用。README 强调可以用Require glow在 Tape 顶部声明依赖缺失时提前失败。样例 Markdown仓库的 examples/glow 已备好NiHao.md、CarrotCake.md、StewedPeaches.md以及notes/、to-do/目录下多篇笔记正好作为 Glow 的渲染素材。准备好后进入该目录执行vhs glow-simple.tape即可按脚本输出文件命令在仓库根目录执行时可写vhs examples/glow/glow-simple.tape。第一个脚本Glow Simple 逐行解读examples/glow/README.md 的 Glow Simple 小节给出了最简录制脚本实际对应仓库文件 examples/glow/glow-simple.tapeOutput examples/glow/glow-simple.ascii Output examples/glow/glow-simple.gif Set Width 1000 Set Height 1050 Type glow Enter Sleep 1s Enter Sleep 1s Escape Sleep 1s Type q Sleep 1s逐条拆解命令作用说明Output path声明渲染输出可同时声明多个输出这里是 ASCII GIFVHS 会渲染到各自位置支持.gif/.mp4/.webm/.ascii以及目录PNG 帧序列Set Width 1000/Set Height 1050设置虚拟终端尺寸像素需在文件顶部、任何非设置/非输出命令之前声明否则被忽略Type glow逐字符模拟输入命令字符间隔默认由Set TypingSpeed决定Enter按下回车执行命令启动 Glow 并进入文件选择器Sleep 1s暂停录像继续采集帧支持100ms、1s、0.5等写法Escape按 Esc 键此处用于退出 Glow 的交互视图返回选择器Type q输入 qGlow 中按q退出应用这个脚本呈现的完整节奏是启动 Glow → 在文件选择器上停留 1 秒 → 进入默认文档视图停留 1 秒 → Esc 回退 → 按q退出。它演示了 Tape 脚本的三要素声明输出与画布 → 用按键驱动交互 → 用 Sleep 控制镜头停留。注意README 中的两处Output路径glow-simple.ascii、glow-simple.gif是相对于示例运行目录的写法在仓库根目录执行时需要像上例一样以仓库根为基准补全为examples/glow/...产物 glow-simple.ascii 与 glow-simple.gif 均已在仓库中留档。双输出GIF 与 ASCII golden file 并行渲染Glow Simple 脚本最有价值的一点是同时声明了.ascii与.gif两个输出。ASCII 输出是把每一帧转成文本快照这带来两个用途零依赖预览任何人无需播放器即可查看终端的关键帧仓库中的 glow-simple.ascii 正是如此可以看到 glow的输入提示行与分隔线。集成测试 golden fileREADME 的 Continuous Integration 章节指出用.txt/.ascii输出生成 golden 文件并入库即可在 CI 中对比两次运行的差异实现终端交互的回归测试——Glow 演示脚本因此不仅能做展示还能当测试用例跑。进阶脚本Glow Full 完整拆解README 的 Glow Full 小节才是重头戏对应 examples/glow/glow.tape它覆盖了 Glow 的搜索、目录切换、编辑、组合键与节奏控制等全部高频交互。完整脚本如下Output examples/glow/vhs-glow.gif Output examples/glow/glow.ascii Set Width 1600 Set Height 1040 Sleep 1s Type glow Sleep 100ms Enter Sleep 1s Hide Tab Type /artichoke Enter Down 2 Show Sleep 0.5s Down 20 Hide Escape Type l Down 5 Show Sleep 1s Up400ms 5 Hide Type /ulysses Enter Show Sleep 0.5s Down200ms 20 Hide Escape Type / Show Sleep 0.5s Type500ms todo Sleep 1 Hide Escape Type /ulysses Enter Show Sleep 0.5s Type750ms ???? Hide Escape Type /artichoke Enter Type m CtrlA Right 4 Show Sleep 1s Type250ms Tasty Sleep 1s Hide Escape Down 5 Type m CtrlU Show Sleep 1s Type150ms Your new internet thing Sleep 3s Hide CtrlC Show这段脚本暗含了多个值得复用的录制套路套路一Hide/Show隐藏中间步骤Hide让 VHS 停止采集帧Show恢复采集源码中对应 command.go 的ExecuteHide与ExecuteShow注释明确写着 starts or stops the recording of the vhs。在 Glow Full 里Hide被用来隐藏按键动作本身、只展示结果Hide / Tab / Type /artichoke / Enter / Down 2 / ShowTab 先切到搜索框输入artichoke并回车完成搜索再向下移动 2 行选择结果——整个过程观众看不到只看到搜索并定位到了文件的落点。同样的模式还用于搜索ulysses、输入/todo、以及最后的CtrlC退出。这种先偷偷做动作、再亮出结果的手法是让演示 GIF 干净、不啰嗦的关键。套路二time语法控制输入速度与滚动节奏VHS 支持在命令后用时间覆盖默认输入速度README 的Set TypingSpeed章节Set TypingSpeed 0.1表示每字符 100ms可被Type500ms这类写法临时覆盖源码 command.go 的ExecuteSetTypingSpeed维护该默认值Up400ms 5每 400ms 按一次上箭头共 5 次——慢速滚动营造审阅感。Down200ms 20每 200ms 按 20 次下箭头——快速翻页。Type500ms todo以每字符 500ms 的速度输入搜索词。Type750ms ????、Type250ms Tasty 、Type150ms Your new internet thing用递减的输入速度表现郑重录入的叙事节奏。这是把输入速度当作剪辑语言的用法慢打强调、快滚带过整个演示因此有了时间维度的编排。套路三方向键、组合键与 Glow 编辑交互Escape后Type lGlow 中l进入文件列表视图随后Down 5定位文件。Type mCtrlARight 4m打开编辑视图CtrlA跳到行首Right 4把光标移到第 4 列在标题前腾出插入位置随后Type250ms Tasty 在文件名前补词。第二处编辑Down 5后Type mCtrlUCtrlU在 Glow 的编辑器中删除到行首再输入Type150ms Your new internet thing整段重写。对比 examples/glow/glow-edit.tape 可以看到同主题的独立变体它额外演示了Type e进入编辑、Type100ms jjjjjjjo逐字符移动光标、Type * Love追加文本、Type300ms :wq保存退出以及Type c打开 Glow 的分页器。三份 Tape 合在一起几乎覆盖了 Glow 全部编辑与浏览热键。套路四键位速查Glow Full 用到的全部 VHS 键位命令在 README.md 的 VHS Command Reference 均有定义特殊键Enter、Tab、EscapeEsc 键本身、Space、Backspace均支持可选time与重复次数如Tab500ms 2。方向键Up/Down/Left/Right同样支持Up400ms 5形式。组合键Ctrlchar如CtrlA、CtrlU、CtrlC也支持CtrlAltShiftchar。节奏控制Sleep支持Sleep 1s、Sleep 100ms、Sleep 0.5Hide/Show配对使用。从源码理解录制机制Tape 脚本之所以所见即所得是因为 VHS 的解析与执行分两层词法/语法层lexer/lexer.go、parser/parser.go、token/token.go负责把命令文本解析为指令树执行层command.go 与 evaluator.go把指令逐条喂给虚拟终端。其中command.go 的ExecuteHide直接切换录像开关startOrStop印证了隐藏动作、保留画面的机制是在帧采集层面生效而不是拍完再裁剪command.go 附近在每次输入前读取v.Options.TypingSpeed作为默认字符间隔被time显式覆盖——这就是Type150ms能逐条变速的底层依据输出端则由 record.go、ffmpeg.go 与 video.go 负责把捕获帧编码为 GIF/MP4/WebMscreenshot.go 支持任意时刻Screenshot抓 PNG 帧。仓库还自带 parser_test.go、lexer_test.go 与 command_test.go把脚本语法与各命令行为都固化为可回归的单元测试——读代码时可以先看这些测试来确认某个命令的确切语义。把脚本跑起来与进一步定制在仓库根目录执行vhs examples/glow/glow-simple.tape # 生成 examples/glow/glow-simple.gif 与 .ascii vhs examples/glow/glow.tape # 生成 examples/glow/vhs-glow.gif 与 .ascii vhs examples/glow/glow-edit.tape # 生成 examples/glow/glow-edit.gif如需微调可参考以下常用配置均须放在 Tape 顶部除TypingSpeed外位于非设置/非输出命令之后都会被忽略Set FontSize 22 # 字号glow-edit.tape 即用 22 Set FontFamily Monoflow # 字体族 Set Theme Catppuccin Frappe # 按名设置主题或 Set Theme { name: ... } 传完整 JSON Set Framerate 60 # 采集帧率glow.tape 在仓库目录版使用 40 Set PlaybackSpeed 1.0 # 回放倍速 Set TypingSpeed 100ms # 全局输入速度 Require glow # 顶部声明依赖缺失即快速失败若想让演示更像真人操作建议按 Glow Full 的做法Sleep控制停顿、time控制按键节奏、Hide把重复的目录切换与清理动作藏起来只保留最终落点。小结examples/glow/README.md 用一简一繁两个脚本浓缩了 VHS 录制 TUI 演示的完整方法论Glow Simple讲清输出声明 画布尺寸 按键 Sleep的最小骨架并示范了 GIF 与 ASCII 双输出Glow Full则展示了 Hide/Show、time变速、方向键与Ctrl组合键、搜索与编辑热键的进阶编排。配合仓库中的 glow.tape、glow-simple.tape、glow-edit.tape 三份可运行脚本以及对应 GIF/ASCII 产物任何人只要装上 VHS、ttyd、ffmpeg 与 glow就能一键复刻并改造出属于自己的 Glow 演示录像——这套按键即代码的录制范式同样适用于其他任何终端交互工具。赞分享开发工具【免费下载链接】vhsYour CLI home video recorder 项目地址https://gitcode.com/gh_mirrors/vh/vhs点击查看免费下载相关推荐Pwndbg 演示 GIF 制作指南用 VHS Tape 录制可复现、可维护的终端演示视频Pwndbg 演示 GIF 制作指南用 VHS Tape 录制可复现、可维护的终端演示视频 本文是 Pwndbg 文档体系的配套创作指南当你需要为某个命令或编程语言编译器标准库语言运行时并发编程使用 VHS 编写 .tape 脚本为 gwsGoogle Workspace CLI制作终端演示 GIF/MP4 的完整指南使用 VHS 编写 .tape 脚本为 gwsGoogle Workspace CLI制作终端演示 GIF/MP4 的完整指南 VHS 是 CharmbrGlow入门指南5分钟掌握终端Markdown阅读器的终极用法Glow入门指南5分钟掌握终端Markdown阅读器的终极用法 Glow是一个强大的 终端Markdown阅读器 专为命令行环境设计让您在终端中优雅地阅读CLI上一篇终极游戏化编程学习指南CodeCombat如何让编程变得简单有趣下一篇fp-ts Foldable 模块完全指南从 reduce 到 monadic fold 的折叠抽象创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
RELATED

相关推荐

Java 责任链模式实战:基于 java-design-patterns 仓库的请求处理链完整解析

Java 责任链模式实战:基于 java-design-patterns 仓库的请求处理链完整解析

示例工程教程 【免费下载链接】java-design-patterns Design patterns implemented in Java 项目地址: https://gitcode.com/GitHub_Trending/ja/java-design-patterns 点击查看 免费下载 导读 责任链(Chain of Responsibility)是 Gang of …

📅 2026/10/1 8:47:50
如何为 AI 编程助手编写自定义技能?基于 web-quality-skills 的 SKILL.md 开发完全指南

如何为 AI 编程助手编写自定义技能?基于 web-quality-skills 的 SKILL.md 开发完全指南

如何为 AI 编程助手编写自定义技能?基于 web-quality-skills 的 SKILL.md 开发完全指南 【免费下载链接】web-quality-skills Agent Skills for optimizing web quality based on Lighthouse and Core Web Vitals. 项目地址: https://gitcode.com/gh_mirrors/we/w…

📅 2026/10/1 8:47:50
FastMoss推荐码TK1000,FastMoss优惠折扣码及核心功能全面解析

FastMoss推荐码TK1000,FastMoss优惠折扣码及核心功能全面解析

FastMoss推荐码TK1000,FastMoss优惠折扣码及核心功能全面解析 做TikTok电商,很多时候真正难的并不是找到一个商品,而是判断这个商品有没有持续增长的空间、应该找什么样的达人推广,以及竞争对手目前正在做什么。 如果只依靠人工刷TikTok内容、…

📅 2026/10/1 8:47:50
MORE NEWS

更多资讯

📰

Autodesk CAD彻底卸载:注册表、服务与许可残留清理

1. 为什么 Autodesk 产品的“卸载”总像卸了一半在 Windows 上卸 CAD 这件事,控制面板里点一下“卸载”只完成了大概六成的工作。剩下的四成,会以服务、驱动、计划任务、注册表分支、许可组件的形式继续躺在系统里,短则占用十几个 G 的磁盘空…

📰

UDP接收程序实战:从bind到避坑的完整指南

简介:一份基于UDP协议的双向通信程序示例,面向需要学习Socket编程的开发者,也适合计算机网络课程实验参考。UDP是无连接、不可靠的传输层协议,常用于实时音视频、在线游戏和DNS查询等场景;示例清晰演示了服务器如何在指…

📰

HF到MindSpore模型迁移:transformer_config配置解析与实战

去年我们把一个在 Hugging Face 上已经跑到 SFT 阶段的 LLaMA 规模模型迁到 MindSpore Transformers 上训练,原本以为只是换框架导入语句的事,结果第一关就卡在了一份 transformer_config.json 上。同一个文件,在 HF 生态里是模型结构说明书…

📰

Yandex浏览器汉化实战:语言包提取、翻译与回填全流程

上周朋友发来一张截图,Yandex 浏览器装好之后,菜单栏一半俄文一半英文,他上来就问:“汉化包是不是没装对?是不是得自己找语言包?”我第一反应也是骂这软件抠门,但把安装目录整个翻了一遍之后发现…

📰

MBSE实战:从文档驱动到模型驱动的系统工程落地指南

MBSE这几年被反复提起,但真正搞明白它到底解决什么问题、怎么落地的人,说实话不多。很多人一听到模型化方法,第一反应是"画几张图",或者是"买套软件工具",其实都偏了。我是从传统文档驱动开发一路…

📰

Vulnhub靶机ODIN:1渗透实战:从信息收集到root提权

打vulnhub靶机这件事,我最大的一个感受是:很多新手不是死在提权上,而是死在最开始那几步。镜像下载好了导入虚拟机,IP怎么都ping不通;或者nmap扫出来了,看着一堆端口却不知道往哪儿使劲。今天拿ODIN: 1这台…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬