推荐使用 Retype：代码演示的未来

大家好，欢迎来到IT知识分享网。

推荐使用 Retype：代码演示的未来

retyRecord typing on one or more editors and replay it at will, to simulate live coding项目地址:https://gitcode.com/gh_mirrors/re/rety

在编程教学和演讲中，实时编码是一种极具吸引力的方式，它能直观地展示代码是如何一步步构建起来的。然而，实际操作时的失误、延迟或是无法复现让这种教学方式面临挑战。这就是 Retype 登场的时候了 —— 它是一款强大的库，能够录制并回放你的文本（通常为代码）编辑过程，使演示变得流畅且无需实时操作。

Retype 是什么？

Retype 让你可以记录对一个或多个文本区域（如代码编辑器）所做的改动，并在之后重播这些编辑，重现原始的键入流程。特别适用于自动化演示场景，而无需你在现场亲自操作。它没有内置界面，UI 需要你自己设计。在一些演示案例中看到的 UI 并不是 Retype 的一部分，而是与之配合使用的 Inspire.js Live Demo 插件。

来看看如何结合 Inspire.js 实现精彩演讲中的演示：

width=”100%” style=”aspect-ratio: 560 / 315″ src=”https://www.youtube.com/embed/ZuZizqDF4q8?start=436″ title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen>

背景与动机

作者热爱将实时编码作为教学工具，随着时间的推移，它已成为一种独特的演讲风格。但是，实时编码对于非现场环境，如大学课程的讲授或学生查阅示例，存在局限性。因此，Retype 应运而生，旨在录制可回放的实时编码流程，保留其动态发展的优点，却消除了不确定性。

Retype 与 Prism Live 和 CodeFlask 等代码编辑器兼容，但理论上可以与任何 <input>, <textarea> 或支持的自定义元素一起工作。

基本用法

要在名为 myTextarea 的文本区域上进行录制：

import Recorder from "https://rety.verou.me/src/recorder.js"; let recorder = new Recorder(myTextarea); recorder.start(); recorder.addEventListener("actionschange", evt => { // recorder.actions 已更新 // evt.detail 包含新的动作 }); 

要回放在 actionsArray 上的所有动作，使用默认设置：

import Replayer from "https://rety.verou.me/src/replayer.js"; let replayer = new Replayer(editor); replayer.runAll(actionsArray); 

或者，通过 npm 进行安装：

npm install rety 

API 概览

Retype 提供了两个类，分别位于相应的模块中：Recorder 和 Replayer。

Recorder 类

Recorder 类用于记录一个或多个 <input>、<textarea> 或其他兼容的控制元素上的操作。

Replayer 类

Replayer 类允许你在一个或多个元素上运行单个动作或一系列动作。

详细的 API 文档和更多选项可在官方文档中找到。

结论

Retype 是演示代码编辑的理想选择，无论你是想要准备无瑕疵的教学材料还是在大型会议上展现专业风采。它易于集成，灵活度高，能够帮助你创造出引人入胜的编程演示，消除实时编码的压力。现在就加入 Retype 社区，提升你的编码演示体验吧！

retyRecord typing on one or more editors and replay it at will, to simulate live coding项目地址:https://gitcode.com/gh_mirrors/re/rety