CodePen 是給前端設(shè)計(jì)師和開發(fā)者用的社交開發(fā)平臺(tái)，很適合用來寫、測(cè)前端代碼，還能發(fā)現(xiàn)好的代碼。它支持寫 HTML、CSS（包括 SCSS）、JS 等前端代碼，編輯器能調(diào)的地方很多，有自動(dòng)補(bǔ)全、Emmet 這些功能。平臺(tái)還有私密項(xiàng)目（得是 PRO 賬戶）、資產(chǎn)托管、完整項(xiàng)目構(gòu)建、實(shí)時(shí)協(xié)作（Collab Mode）等功能。超過 180 萬(wàn)前端開發(fā)者和設(shè)計(jì)師在這分享作品，能給用戶帶來靈感，也方便學(xué)習(xí)和交流。

功能特色

?在線編輯器：能寫原生 HTML、CSS 和 JavaScript，也支持 Markdown、HAML、Slim、Pug、Sass、LESS、Stylus、PostCSS 等多種預(yù)處理器語(yǔ)法。

?實(shí)時(shí)預(yù)覽：CodePen編輯代碼時(shí)，右邊的預(yù)覽區(qū)會(huì)馬上顯示效果。

?代碼片段管理：每個(gè)代碼片段叫 “Pen”，用戶能保存、分享，還能復(fù)制修改（Fork）。

?外部資源引入：能通過 CDN 輕松添加 CSS 和 JS 庫(kù)。

?協(xié)作開發(fā)：Pro 版用戶可以開實(shí)時(shí)協(xié)作模式，多人能同時(shí)編輯同一個(gè) Pen。

?作品集展示：用戶能創(chuàng)建自己的代碼集合，展示作品。

?嵌入功能：可以把 Pen 放到自己的網(wǎng)站或博客里。

?社區(qū)互動(dòng)：用戶能互相關(guān)注，看別人的作品，交流學(xué)習(xí)。

使用指南

?注冊(cè)賬號(hào)：進(jìn)CodePen官網(wǎng)后，點(diǎn)右上角 “Sign Up”，能用郵箱注冊(cè)，也能用 GitHub、Google 等賬號(hào)快速登錄。

?創(chuàng)建 Pen：登錄后點(diǎn) “New Pen”，就能開始做代碼項(xiàng)目。

?編輯代碼：左邊是 HTML、CSS、JS 編輯器，右邊是實(shí)時(shí)預(yù)覽窗口。

?保存與分享：點(diǎn)右上角 “Save” 保存 Pen，保存后會(huì)有唯一鏈接可以分享。

?設(shè)置外部資源：點(diǎn)右上角 “Settings”，在 HTML/CSS/JS 標(biāo)簽里加 CDN 鏈接就行。

適用場(chǎng)景

?快速原型開發(fā)：快速試出前端設(shè)計(jì)和交互效果。

?代碼片段分享：分享有用的代碼片段。

?前端技術(shù)展示：展示自己的前端開發(fā)能力。

?學(xué)習(xí)與教學(xué)：看、改其他開發(fā)者的代碼來學(xué)習(xí)。

版本與收費(fèi)

?免費(fèi)版：功能夠做面試作品集，能建不限數(shù)量的公開項(xiàng)目，還能基本編輯和分享。

?Pro 版：有額外功能，比如實(shí)時(shí)協(xié)作、導(dǎo)出到 GitHub Pages、專屬域名等。

關(guān)鍵問題

?問題 1：CodePen 作為前端開發(fā)工具，其編輯器有哪些提升效率的特性？

答案：編輯器有自動(dòng)補(bǔ)全、Emmet 功能，能加快編碼速度，讓代碼更準(zhǔn)；可以調(diào)主題（比如淺色的 Emmet Classic、深色的 Twilight）、字體（比如 MonoLisa）、縮進(jìn)寬度、鍵綁定（比如 Vim）；還有語(yǔ)法高亮、行號(hào)顯示、自動(dòng)換行、保存時(shí)格式化這些功能。

?問題 2：CodePen 的社區(qū)生態(tài)能為用戶帶來哪些價(jià)值？

答案：平臺(tái)有 180 多萬(wàn)活躍的前端設(shè)計(jì)師和開發(fā)者，用戶能從里面找靈感，看、分享優(yōu)秀作品；參加 CodePen Challenges 有可能上首頁(yè)和社交媒體，提升技能和名氣；還能用上各種框架、庫(kù)的現(xiàn)成模板，快速開始項(xiàng)目，方便學(xué)習(xí)交流。

?問題 3：PRO 賬戶和團(tuán)隊(duì)功能與普通賬戶相比，有哪些核心差異？

答案：普通賬戶能建公開項(xiàng)目，做基本的編輯和分享；PRO 賬戶能有私密項(xiàng)目（通過秘密鏈接訪問）、截圖等功能；團(tuán)隊(duì)功能里，每個(gè)成員都能用上 PRO 賬戶的所有功能，像資產(chǎn)上傳、實(shí)時(shí)協(xié)作（Collab Mode）、Presentation Mode 等，還能自定義 CSS 用于相關(guān)內(nèi)容，適合團(tuán)隊(duì)一起做事。

如果你是前端開發(fā)者或設(shè)計(jì)師，CodePen 很實(shí)用，可以去官網(wǎng)了解更多，然后開始用。