Misaka Cloud Blog

Back

这是什么

这篇短文演示如何在博客文章里嵌入一段交互式终端录屏。录屏用 asciinema rec 录制为 .cast 文件,再用 asciinema-player 原样回放,保留真实的终端配色与 ANSI 转义序列。

示例

下面是一段简单的终端操作录屏:

特性

  • 自动播放:页面加载后自动回放(若系统未开启「减弱动态效果」)。
  • 双主题:跟随博客暗色开关联动,亮/暗配色对齐站内代码块。
  • 减弱动态效果:开启后终端定格在末帧,不自动播放、不循环,仍可手动点播放。
  • 无 JS 兜底:禁用 JavaScript 时展示静态 SVG 截图。

在自己的文章里使用

在 markdown 里写一个 asciinema fenced 代码块,内容是一行 JSON:

```asciinema
{"src": "/casts/your.cast", "alt": "描述", "cols": 80}
```

其中 src.cast 文件在 public/ 下的路径,alt 用于无障碍与 noscript 兜底图,cols 可选(默认读录制时的宽度)。

终端录屏嵌入演示
https://blog.misakacloud.net/blog/terminal-cast-demo
Author Misaka Cloud
Published at 2026年7月17日