codepen.io ：在线前端代码编辑器 - 美国开发者工具网站
全球最活跃的在线HTML、CSS和JavaScript前端代码编辑器和创意展示社区，以“Pens”代码片段即时预览和分享著称。
行业分类： 美国前端开发、在线代码编辑[文]器、代码展示社区、CSS艺[章]术、JavaScript实[来]验
成立时间： 2012年（由Chris Coyier、Alex Vazquez和Tim Sabat创立）
所属国家： 美国网站（由CodePen[自], Inc.运营，私人控股）
网站语言： 支持英语（为主）
服务区域： 全球
官方网站： www.codepen.io
网站介绍： www.codepen.io 是全球最活跃的在线HTML、CSS和JavaScript前端代码编辑器和创意展示社区，由Chris Coyier（CSS-Tricks创始人）、Alex Vazquez和Tim Sabat于2012年创立。CodePen以“在浏览器中构建、测试和分享前端代码”为核心理念——用户在在线编辑器中编写HTML、CSS和JavaScript代码，实时预览渲染结果，保存为“Pen”代码片段并分享给社区。CodePen是前端开发者、CSS艺术家和Web动画爱好者展示创意、调试代码和发现灵感的核心平台。
CodePen首页以社区精[C]选Pens展示和“Edit[c]or”编辑器入口为特色。核[c]心功能包括：Pens（代码[c]片段——每位用户创建包含H[n]TML、CSS和JS三个面[.]板的Pen，实时渲染在预览[c]面板中；保存后生成唯一UR[o]L可分享和嵌入博客/文档）[m]、Editor（编辑器——[文]内置语法高亮、Emmet缩[章]写展开、代码提示、自动保存[来]和版本历史；支持预处理器：[自]Sass/SCSS、Les[C]s、Stylus（CSS）[c]、Haml、Markdow[c]n、Slim（HTML）、[c]TypeScript、Co[n]ffeeScript（JS[.]））、Collection[c]s（收藏集——用户收藏和组[o]织他人Pens到自定义收藏[m]集中，类似Pinteres[文]t的代码灵感板）、Chal[章]lenges（代码挑战——[来]官方定期发布主题挑战如“C[自]SS动画挑战”“响应式设计[C]挑战”），社区提交作品并投[c]票评选优胜者）、Topic[c]s（话题标签——Pens按[c]话题分类：CSS Art、Animation[n]、Responsive、R[.]eact、Vue、D3.j[c]s等，浏览发现同类创意）、[o]Teams（团队协作——C[m]odePen Pro付费功能，团队共享P[文]ens和资源库，协作编辑代[章]码）和Embed（嵌入——[来]每个Pen生成嵌入代码，在[自]博客、Medium文章和文[C]档中嵌入实时可交互的代码演[c]示）。
CodePen提供Free[c]（基础无限Pens）和Pr[c]o（付费解锁资产上传、Co[n]llab Mode实时协作编辑、Te[.]am团队功能）方案。Cod[c]ePen是“Code in the Browser”运动的先驱[o]之一，与JSFiddle、[m]CodeSandbox和S[文]tackBlitz在在线代[章]码编辑领域各有侧重。
操作流程： 访问www.codepen.io ，注册免费账户。点击“Create”新建Pen，在HTML/CSS/JS面板编写代码实时预览。保存Pen生成分享链接。在Challenges参与主题代码挑战赛。在Collections收藏和组织他人优秀Pens。搜索话题标签（如#CSSArt）发现创意作品。Pro用户开启Collab Mode邀请他人实时协作编辑代码。