借助 CodeBuddy，我打造了一个打光动画加持的代码演示工具

繁依Fanyi

发布于 2025-05-18 00:34:38

13100

代码可运行

文章被收录于专栏：繁依Fanyi 的专栏繁依Fanyi 的专栏

运行总次数：0

代码可运行

我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴

初衷：我需要一个「会动的」代码演示工具

平时写博客或者准备组件文档时，总会遇到一种场景：我希望一边展示代码，一边让读者实时看到运行效果。如果能有个小工具，左边输入代码，右边立即展示预览，再加上一点视觉动效和主题切换，那就完美了！

于是，我跟 CodeBuddy 提了个请求：

我要用 Vue3 + Prism.js + iframe 制作一个代码演示工具 CodeMotionShow，支持：左侧代码编辑（HTML/CSS/JS），右侧同步预览，多主题切换，打字动画效果，一键导出！

我本以为这个任务得我来一行一行搭结构，写逻辑，调样式。结果——完全不是这样。

CodeBuddy 没有建议我怎么做，而是直接接过活，开始从零实现整个项目。接下来的每一步，都是它在主动推演、构建，而我只需要跟着它的节奏走。

项目搭建：CodeBuddy 从零构建 Vue 应用

第一步，CodeBuddy 用 Vite 创建了一个 Vue3 项目：

npm create vite@latest . -- --template vue

并选择了 JavaScript 版本，而不是 TypeScript，这对快速开发非常友好。紧接着，它立刻安装了 Prism.js：

npm install prismjs

我几乎没怎么插手，所有依赖管理、项目初始化和结构清理都是它一手包办的。此时目录已经干净整洁，准备进入开发状态。

编写核心组件：一个左编右显的动效编辑器

CodeBuddy 先创建了一个名为 CodeEditor.vue 的组件，里面实现了：

三个可切换的文本框（HTML、CSS、JS）
每次输入都触发打光动画
使用 Prism.js 高亮当前代码块
实时将代码同步给 App.vue 页面主组件

这部分代码结构清晰，逻辑职责分明，尤其打光动画的实现非常巧妙：每次输入文字时，它通过添加一个特殊 class 再触发过渡动画，模拟了类似终端打字时的高光效果。

页面布局与实时预览：iframe 的魔法时刻

在主组件 App.vue 中，CodeBuddy 构建了左右布局结构，左边是代码编辑器，右边则嵌入一个 iframe，用来实时展示运行效果。

每当我在编辑器里敲下字，右侧 iframe 就立即更新页面。实现这一点的方式也很优雅：它通过动态组合 HTML、CSS、JS 内容，然后拼接成完整的 HTML 字符串，再传给 iframe。

const fullHtml = `
  <html>
    <head><style>${cssCode}</style></head>
    <body>
      ${htmlCode}
      <script>${jsCode}</script>
    </body>
  </html>
`;
iframe.srcdoc = fullHtml;

简洁、直观、无需刷新页面。CodeBuddy 不仅实现得快，还特别注重体验细节。

多主题切换：支持 Atom、Dracula 和 Nord

为了让代码展示更炫，CodeBuddy 又主动安装了 prism-themes：

npm install prism-themes

并在编辑器中添加了主题切换按钮。我点击不同主题，编辑器代码区会即时替换样式，仿佛穿上了不同的皮肤。整个切换过程丝滑流畅，不会闪屏或卡顿。

动效实现与样式打磨：真正「动起来」的代码

为了突出动效特色，CodeBuddy 在 style.css 中加入了专门的「打字动画」样式，通过 @keyframes 控制发光：

@keyframes glow {
  0% { background-color: transparent; }
  50% { background-color: rgba(255, 255, 255, 0.1); }
  100% { background-color: transparent; }
}
.line-glow {
  animation: glow 0.6s ease-in-out;
}