CodePen

CodePen 是面向前端开发者的在线代码编辑与社交平台，提供实时预览的代码编辑器，支持 HTML、CSS、JavaScript 以及预处理器（如 Sass、Less、Babel）。用户创建的作品称为“Pen”，可嵌入网页或分享链接。平台还包含 Challenges（编码挑战）、Collections（作品集）、以及 Pro 会员服务（私密项目、协作模式、部署功能）。

核心功能

• 在线编辑器：支持实时预览、自动补全、代码高亮，可切换编辑器布局（如垂直、水平、网格）。
• 社区功能：浏览热门作品、搜索标签、关注作者、评论点赞，形成活跃的交流生态。
• 资产管理：上传图片、字体、JSON 等资源，通过 Assets API 调用。
• 协作与版本控制：Pro 用户可邀请协作者，查看版本历史。
• 嵌入与分享：一键生成嵌入代码，支持在个人网站、博客等展示作品。

适用人群

• 前端开发者：快速原型验证、技术交流与作品展示。
• 设计师：实现交互原型，分享动效和 UI 代码。
• 教育工作者与学生：在线演示代码、布置编码任务。
• 开源爱好者：发现有趣项目，获取灵感。

使用方式

免费注册后即可创建 Pen 并参与社区。高级功能需订阅 Pro（月费 $8 起），包括私密项目、无限资产存储、团队协作等。CodePen 也提供“看板”功能（类似项目管理页）和“Live View”，方便移动端测试。

注意事项

• 免费账户的项目默认公开，注意保护隐私。
• 编辑器依赖网络，离线无法使用。
• 部分功能（如自动化、私有 npm）仅在 Pro 中提供。