借助 CodeBuddy，我打造了一个打光动画加持的代码演示工具
原创
借助 CodeBuddy，我打造了一个打光动画加持的代码演示工具
原创
我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴
起因：想做个“能动起来”的代码展示板
有时候在写博客或者整理项目文档时，我总会遇到这种情况：想让别人看到代码的同时，也能马上看到运行效果，最好还能加点动画、换个配色，看起来更有感觉。
我当时的想法其实挺简单：如果能有一个小工具，左边写代码，右边实时显示，还能切主题、加点打字特效，就太方便了。
于是我对 CodeBuddy 发了个请求：
用 Vue3 + Prism.js + iframe 做一个代码演示工具，支持：左侧写代码、右侧预览、多主题、打字动画、一键导出。
原本以为这个功能我要自己慢慢搭，比如创建项目、装依赖、调 iframe 显示、搞样式之类的。结果没想到——节奏比我想的快太多了。
我这边才刚说完需求，CodeBuddy 就开始动手做了，而且几乎没让我插手。后面基本就是它在主动推进，我跟着测试和调整，节奏轻松又高效。
项目启动：Vue 应用直接搭起来了
第一步，它用 Vite 快速起了一个 Vue3 项目：
npm create vite@latest . -- --template vue选择的是 JavaScript 版本，这样开发起来省心不少。接着安装 Prism.js：
npm install prismjs这些步骤我都没参与，等我点开项目文件夹时，结构已经清清爽爽，开发环境就绪。
核心模块：左边写代码，右边直接看效果
很快，CodeBuddy 新建了一个叫 CodeEditor.vue 的组件，功能很集中：
- 三栏切换（HTML / CSS / JS）
- 每输入一段代码，就有高亮动画
- 使用 Prism.js 处理语法高亮
- 输入内容实时传到主组件
其中我比较喜欢的一点是那个“打光效果”，打字的时候整行文字会轻轻闪一下，就像终端光标那种视觉反馈，在演示里效果很加分。
页面布局 + 实时预览：iframe 来助阵
在 App.vue 里，它安排了左右两栏结构，左边是刚刚的编辑器，右边是一个 iframe，用来实时渲染代码。
实现逻辑很巧妙：把用户输入的 HTML、CSS、JS 动态组合成完整网页片段，然后通过 iframe 的 srcdoc 直接注入。
const fullHtml = `
<html>
<head><style>${cssCode}</style></head>
<body>
${htmlCode}
<script>${jsCode}</script>
</body>
</html>
`;
iframe.srcdoc = fullHtml;这样不需要刷新页面，也不依赖任何第三方沙箱服务，体验顺畅干脆。
主题切换：多套配色随点随换
为了让代码区看起来不那么单调，它还引入了 prism-themes：
npm install prism-themes然后加了一个主题切换功能。我随便点几个按钮，编辑区立刻换肤，从 Atom 到 Dracula 到 Nord，效果即时更新，看着也挺有意思。整个过程不卡，视觉反馈自然，没有那种“闪一下”的尴尬。
动效部分：让输入也带点「氛围感」
动效方面，主要是做了打字时的发光处理。它在样式文件里加入了一个简单的 keyframe 动画，每次触发输入时，当前行就会“亮一下”：
@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;
}这个细节做得挺贴心，在做代码演示或教学时，能很好地引导视线焦点。
一键导出：代码展示页秒生成
最后，它还加了一个导出按钮。我点一下，就能生成一份包含所有代码的独立 HTML 文件。
这个页面可以直接嵌到博客，或者传到 GitHub Pages、Vercel 之类的地方，展示方式灵活多了，效果也和本地一致。
整体回顾：一条消息换来一整套工具
回过头看，我其实就说了这么一句：
我想做个带打字动效的代码展示工具。
但最后得到的，是一整个 Vue3 项目，包括：
- 三栏代码编辑 + 实时预览
- iframe 动态渲染逻辑
- 多主题自由切换
- 打光动画效果
- 一键导出为 HTML 页面
而且代码结构也很规整：组件分工明确、样式分离清晰、注释也写得挺细。我几乎没有在“搭架子”这个阶段花时间，整个过程更像是在“带着我做”，不是单纯贴一段代码那么简单。
🌱 后记：给个想法，其他交给它就行了
如果你也有类似“我想做个 XX 工具页面”的想法，不妨直接开口试试看。有时候，我们并不缺思路，只是缺个靠谱的人（或工具）帮你把它落地。
我觉得这次的开发体验就挺特别的：从想法到成品，中间的步骤都有人主动替我走了一遍。省事、省心，而且还能学到不少实现上的细节。
—— 完 ——
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
