線上工具

CodePen線上編輯器-前端程式碼(HTML、CSS、JS),可嵌入到網站演示。



CodePen線上編輯器
使用CodePen線上程式碼編輯器,只要開啟瀏覽器,就能撰寫HTML、CSS和JavaScript並即時預覽結果,支援將整個程式碼編輯視窗,嵌入到自己的網站中作範例演示的功能。同時CodePen網站還是個前端開發技術交流的開源平台,可查看其他用戶所撰寫的程式碼和成果演示。








點此前往:CodePen線上程式碼編輯器


CodePen線上程式碼編輯器
STEP1

免費註冊帳號,開始使用線上程式碼編輯器,或者檢視其他作者寫的程式碼範例,互相技術交流激發設計靈感的開源平台。
CodePen線上編輯器1

STEP2

主要為HTML、CSS、JavaScript前端語言。可依需求最大化編輯器某一個窗口、進階編譯偵錯。
CodePen線上編輯器2

STEP3

在畫面下方會看到「embed嵌入」與「Export匯出」的選項。
CodePen線上編輯器3

STEP4

複製程式碼,在貼到自己的部落格中。
CodePen線上編輯器4

看看範例

See the Pen
Parasites
by Anurag (@anuraghazra)
on CodePen.



延伸閱讀:JSFiddle線上編輯器Stekpad免費線上共同編輯器