使用CodePen線上程式碼編輯器,只要開啟瀏覽器,就能撰寫HTML、CSS和JavaScript並即時預覽結果,支援將整個程式碼編輯視窗,嵌入到自己的網站中作範例演示的功能。同時CodePen網站還是個前端開發技術交流的開源平台,可查看其他用戶所撰寫的程式碼和成果演示。
點此前往:CodePen線上程式碼編輯器
CodePen線上程式碼編輯器
STEP1
免費註冊帳號,開始使用線上程式碼編輯器,或者檢視其他作者寫的程式碼範例,互相技術交流激發設計靈感的開源平台。
STEP2
主要為HTML、CSS、JavaScript前端語言。可依需求最大化編輯器某一個窗口、進階編譯偵錯。
STEP3
在畫面下方會看到「embed嵌入」與「Export匯出」的選項。
STEP4
複製程式碼,在貼到自己的部落格中。
看看範例
See the Pen
Parasites by Anurag (@anuraghazra)
on CodePen.