線上網頁編輯器

2016-06-29 100 words One minute

Contents

以下整理幾個常用的線上網頁編輯器，各有不同的特色和適合場景，方便隨時在瀏覽器中測試和分享程式碼。

主流工具

codepen.io — 目前最流行的前端 playground，介面美觀，社群活躍。支援 HTML、CSS、JavaScript，以及各種預處理器（Sass、Less、TypeScript 等）。適合：分享 UI 效果、CSS 動畫、學習範例。Pen 可公開瀏覽，是前端開發者展示作品的熱門平台。

jsfiddle.net — 老牌的線上編輯器，分為 HTML、CSS、JavaScript、結果四個面板，支援常見的 JS 函式庫（jQuery、React、Vue 等）。適合：快速重現 bug、在 Stack Overflow 上分享可執行的範例。

jsbin.com — 類似 JSFiddle，介面較簡潔，支援即時預覽。有 console 面板可查看輸出，適合教學示範和快速原型測試。

plnkr.co — 支援多檔案編輯，可以模擬更接近真實專案的結構，適合測試 Angular、React 等需要多個檔案的框架。支援 npm 套件引入。

cssdesk.com — 專注於 HTML + CSS 的簡易編輯器，介面乾淨，適合純 CSS 效果測試。

dabblet.com — 由 CSS 大師 Lea Verou 開發，專為 CSS 設計，支援 CSS 變數和即時預覽，介面極簡。

liveweave.com — 支援 HTML、CSS、JavaScript 三欄式編輯，有內建的自動完成功能，適合初學者使用。

codemagic.gr — 輕量的線上編輯器，支援多種語言的語法高亮，適合快速測試小片段程式碼。